javascript - React hooks：使用 useEffect 时未获取状态更新

Question

我在混合useState和useEffect钩子时遇到问题。我似乎无法query在onReady().

function Foo() {
  const [ query, setQuery ] = React.useState('initial query');

  React.useEffect(() => {
    myLibClient.onReady(onReady)
  }, []);

  function onReady() {
    const newQuery = myLibClient.createQuery({ options });
    setQuery(newQuery);
    console.log(query); // initial query :(
  }

  return null;
}

谁能看到我做错了什么或解释为什么这不起作用？

Answer 1

这里的问题是，就像this.setState在基于类的反应组件中一样，该setQuery函数也异步设置状态。

请参阅参考反应文档和RFC：为什么它是异步的？

因此，如果您在设置状态后尝试访问该值，您将获得较旧的值。

您可以在此处验证此行为。https://codesandbox.io/s/2w4mp4x3ry。（参见名为 Counter.js 的文件）您会看到 counter 的值之前和之后是相同的。

如果要访问更新的值，可以在下一个渲染周期中访问它。我创建了另一个示例，您可以在其中看到正在呈现新的查询值。

https://codesandbox.io/s/8l7mqkx8wl（参见名为 Counter.js 的文件）