我有一个父组件，它有自己的状态并且在子组件之间共享。

在我的子组件中，我有一个表单和数据，我创建了一个本地状态。让我们调用这个子组件。

在我的父组件中，有一个单击按钮，我将数据从我孩子的本地状态更新到我父母的状态。我通过从父级到子级传递一个标志来做到这一点。

此外，我的父母两次渲染同一个孩子，最终代码如下：

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 添加的内容。

这个你能帮我吗。

PS：我采用这种结构的原因是，在我的孩子中，我有一个非常大的表格，并且同一个表格被使用了两次。