【问题标题】：React |How to Update parent state when multiple children sending event to parent at same timeReact |当多个孩子同时向父母发送事件时如何更新父母状态
【发布时间】：2021-07-25 04:22:17
【问题描述】：

我有表单和输入组件。表单包含 Input 作为子项。每当表单提交时，我都会向子 Input 组件发送一个递增的值。在 Input 组件中，我在该递增值上有一个侦听器 (useEffect) 来验证输入。在验证输入后，我正在调用一个函数 onValidation(isValid)，它作为道具从父级接收。并尝试使用验证结果更新父组件。但是，当表单提交时，所有子组件同时调用 onValidation 方法，父组件立即设置状态。因为反应 setstate 不会立即影响验证数据在父项中设置不正确。这是代码。

有什么办法可以解决这个问题吗？如果不是，这些用例的最佳模式是什么？


function Form() {
    const [validations,setValidations] = useState({})

    function onValidation(isValid,key) {
        setValidations({...validations,...{[key]:isValid}});
    }

    function onSubmit(){
        //Here the validations object not containing all the input fields data.
        // because while doing setValidation some data is missing
        let isValid = Object.keys(validations).reduce((prev,curKey)=>{return (prev && validations[curKey]) },true);
        if(isValid) {
            window.alert("The form is valid");
        }else {
            window.alert("The form is not valid");
        }
    }

    return (
        <form onSubmit={onSubmit}>
            <Input name="first" onValidation={onValidation}/>
            <Input name="second" onValidation={onValidation}/>
            <Input name="third" onValidation={onValidation}/>
            <Input name="fourth" onValidation={onValidation}/>
        </form>
    )
}

function Input(value,name,onValidation) {
    function validate(e) {
        var val = e.target.value;
        if(val){
            onValidation(true,name)
        }else {
            onValidation(false,name)
        }
    }

    return (
        <input type="text" onChange={validate} value={value}>
    )
}

【问题讨论】：

你应该提供一个最小的代码沙箱，这样我们才能最好地帮助你，从第一眼看这个代码似乎工作正常
抱歉耽搁了。附加代码框链接codesandbox.io/s/serene-hofstadter-4nqr3?file=/src/App.js@EliavLouski，您可以在检查窗口中看到验证的控制台打印。验证对象不包含所有键。
它是因为你用 {} 而不是 {fourth: false, first: false, second: false, third: false} 初始化 validations
即使我用初始值初始化它们。当我在 useState() 中打印它们时，它们没有正确更新。因为反应异步更新状态。请检查控制台日志中的值。
我不明白你在说什么，更新的值记录在控制台中。

标签： javascript reactjs forms validation

【解决方案1】：

经过一番挖掘，找到了解决这个问题的办法。

https://reactjs.org/docs/faq-state.html#what-is-the-difference-between-passing-an-object-or-a-function-in-setstate

当使用 setValidations 设置验证时，我们必须使用回调函数来设置它，而不是直接设置它。通过这种方式，状态设置正确。相应地更新了代码沙箱。

    setValidations((validations) => {
      return { ...validations, ...{ [key]: isValid } };
    });

https://codesandbox.io/s/serene-hofstadter-4nqr3?file=/src/App.js

【讨论】：

【解决方案2】：

只需将初始状态添加到validations。 https://codesandbox.io/s/cocky-snowflake-g2rr5?file=/src/App.js

你的初始键是空对象，所以没有一个道具是假的，因此验证是好的

更新

我现在明白是什么让你烦恼了。请阅读this answer。

【讨论】：