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

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

请参见Reference react docs和RFC: Why it is asynchronous?

因此，如果您尝试在设置状态后立即访问该值，则会得到较旧的值。

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

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

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

React挂钩：使用useEffect时无法获取状态更新

1 个答案: