React Hooks:在设置子状态之前先设置父状态

时间:2019-12-12 23:42:29

标签: reactjs react-hooks

我观察到了useState的一个有趣的细微差别,我想更深入地了解它。情况:

  • 父组件拥有一些通过useState创建的局部状态
  • 父级将事件处理函数作为道具传递给子组件。此处理程序在父级中设置状态。
  • 子组件也具有由useState创建的本地状态
  • 当孩子中发生某个事件时,回调道具和本地状态设置器都会被调用

我的观察是,如果首先运行回调,则将触发父级的重新渲染,这将设置子级状态。如果我颠倒顺序,事情“似乎”就可以了。

设计的示例:

父组件

const Parent = () => {
  const [, setParentData] = useState();
  function onData(data: string) {
    setParentData(data);
  }
  return (
    <Child
      onData={onData}
    />
  )
};

子组件

const Child = ({
  onData
}) => {
  const [childData, setChildData] = useState();
  function onClick() {
    const data = Date.now;

    onData(data);

    // this call gets clobbered if onData is called first
    // but is fine if I swap them
    setChildData(data); 
  }
  return (
    <div onClick={onClick}>{ childData }</div>
  );
};

任何人都知道确保在父回调之前确保调用子状态设置器足以保持所有状态更新,还是在这里还有其他异步类型的事情可能使我仍然处于某种竞争状态?

0 个答案:

没有答案