React 钩子：使用 useEffect 时未获取状态更新

Question

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

中引用新的 query 状态

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

这里的问题是，在基于 class 的 React 组件中，与 this.setState 一样，setQuery 函数也会异步设置状态。

见Reference react docs and RFC: Why it is asynchronous?

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

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

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

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

React 钩子：使用 useEffect 时未获取状态更新

React hooks: Not getting the state update when using useEffect

javascript

reactjs

react-hooks