0

Есть 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 (
        ....
    )
}

При вызове функции handleAddOp в компоненте AddOperator, содержимое инпута отправляется в функцию AddBrand в компоненте MassViewer. После выполнения условий записывается статус успешности, но проблема в том, что он запаздывает на 1 рендер. Я так и не понял, какой хук мне использовать useEffect или useReducer и каким образом наложить на мою ситуацию. Подскажите как это реализовать.

1 ответ 1

0

В общем пара дней жесткого тупняка и решил добавлением эффекта в компонент AddOperator:

export const AddOperator:React.FC <AddOperatorProps> = (props) => {

    const [message2, setMessage2] = useState<string>(props.message);
    
    useEffect(() => {
        setMessage2(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 (
        ....
    )
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.