Есть 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 className="allContainers">
<div className="opNames">
<ElementList opNames={opNames} />
</div>
<div>
<AddOperator AddBrand={AddBrand} message={checkInput}/>
</div>
<div>
<DelOperator DeleteBrand={DeleteBrand} brand={opNames} />
</div>
</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 (
<div>{message2}</div>
....
)
}
При вызове функции handleAddOp в компоненте AddOperator, содержимое инпута отправляется в функцию AddBrand в компоненте MassViewer. После выполнения условий записывается статус успешности в компоненте AddOperator, но проблема в том, что он запаздывает на 1 рендер. Опаздывает даже если вывести консоль лог в компоненте MassViewer после установки состояния. Как я понял, мне нужно использовать хук useEffect, но из документации не понял как это сделать, подскажите как реализовать.