reactjs - 同时从多个子组件更新父状态

Question

我有一个父组件，它有自己的状态，并且在子组件之间共享。
在我的子组件中，我有一个表单和数据，我创建了一个本地状态。让我们调用这个子组件。
在我的父组件中，有一个单击按钮，我将数据从我 child 的本地状态更新到我 parent 的状态。这是我通过将一个标志从父级传递给子级来实现的。
此外，我的 parent 将同一个 child 渲染了两次，最终代码如下:

const parent = () => {
  const [parentState, setParentState] = useState(null);
  const [submitSignal, setSubmitSignal] = useState(false);

  const handleSave = () => {
    setSubmitSignal(true);
  }

  return (
    <div>
      <div onClick={handleSave}>
        Save Data
      </div>

      <Child
        pos={0}
        key={0}
        parentState={parentState}
        submitSignal={submitSignal}
        setParentState={setParentState}
      />

      <Child
        pos={1}
        key={1}
        parentState={parentState}
        submitSignal={submitSignal}
        setParentState={setParentState}
      />
    </div>
  )
}

const Child = (props) => {
  const [childState, setChildState] = useState(null);

  React.useEffect(() => {
    const { pos, submitSignal, parentState, setParentState } = props;
    if (submitSignal) {
      setParentState(...parentState, ...childState);
    }
  }, [props.submitSignal])

  return (
    <div>
      // A large form which multiple fields
    </div>
  )
}

现在这里发生的事情是，一旦我从我的父组件中设置 submitSignal 为真，子组件就会同时接收它并尝试更新父组件的状态。这是一种竞争条件情况，即 Child 0 更新数据，但在它甚至在父状态中更新之前 Child 1 也会更新父状态，从而覆盖/删除 Child 0 添加的内容。
这个你能帮我吗。
附注:我采用这种结构的原因是，在我的 child 中，我有一个非常大的表格，并且同一个表格被使用了两次。

Answer 1

您必须使用回调函数，而不是直接设置父状态。这样，您将在覆盖状态时获得更新的先前状态。

    if (submitSignal) {
      setParentState((pstate)=>{
         return {...pstate,...childstate}
      });
    }

https://stackoverflow.com/a/68531170/5707801