MrYogurt
@MrYogurt

Как получить актуальное состояние useState?

Есть 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, но из документации не понял как это сделать, подскажите как реализовать.
  • Вопрос задан
  • 40 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы