主页 / 问题 / 1194034
Accepted
MrYogurt
Asked:2021-10-23 01:47:18 +0800 CST2021-10-23 01:47:18 +0800 CST

UseState 挂钩状态滞后

  • 772

有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 以及如何应用于我的情况。请告诉我如何实现它。

reactjs

1 个回答

  1. Best Answer

    一般来说，几天的愚蠢决定是通过向 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 (
        ....
    )
}

    • 0

相关问题