有2个组件:
const MassViewer:React.FC = (props) => {
const [checkInput, setCheckInput] = useState<string>('Заполните поле');
function AddBrand (name: string) {
let array: string[] = opNames.slice();
function checkAvailability(array: string[], name: string) {
return array.some(function(arrVal) {
return name === arrVal;
});
}
if (checkAvailability(array, name) === false) {
setOpNames([...opNames, name]);
setCheckInput('Добавлено');
} else {
setCheckInput('Такой оператор уже есть');
}
function Message(value: string){
setCheckInput(value);
}
}
....
return (
<div>
<AddOperator AddBrand={AddBrand} message={checkInput}/>
</div>
);
}
export const AddOperator:React.FC <AddOperatorProps> = (props) => {
const [message2, setMessage2] = useState<string>(props.message);
function handleAddOp (e: React.MouseEvent<HTMLElement, MouseEvent>) {
e.preventDefault();
const inputResult: string = inputOp.slice();
if (inputResult.length >= 1) {
props.AddBrand(inputResult);
setInputOp('');
setMessage2(props.message);
} else {
setMessage2('Вы не заполнили поле');
setInputOp('')
}
}
return (
....
)
}
在 AddOperator 组件中调用 handleAddOp 函数时,会将输入的内容发送到 MassViewer 组件中的 AddBrand 函数。满足条件后,写入成功状态,但问题是晚了1个render。我仍然不明白我应该使用哪个钩子 useEffect 或 useReducer 以及如何应用于我的情况。请告诉我如何实现它。
一般来说,几天的愚蠢决定是通过向 AddOperator 组件添加一个效果来决定的: