React 中的异步函数不会对状态变化做出反应

Question

我希望我aysnc function对状态变化做出反应，以便它可以在状态变化时终止。我发现它对改变状态没有反应。

在提供的示例中，我正在从函数内部更改状态，但是我已经对其进行了测试并从函数外部更改了状态（单击按钮），但它也不起作用。

const [testVariable, setTestVariable] = useState(false);

useEffect(()=> {
  testFunction();
}, [])

const testFunction = async () => {
  await timeout(1000);

  console.log("Setting test variable to: " + true);
  setTestVariable(true);

  await timeout(1000);
  
  console.log("Test variable is: " + testVariable);
}

预期结果是看到变量更改为 true，但是我看到的是：

Answer 1

状态变量永远不会改变它们的值。（请注意，您可以、拥有并且应该声明它们，const因为它们不会改变）。

\n

组件函数的后续调用将获得一个具有相同名称和不同值的新状态变量。

\n

您的testFunction函数已关闭旧的状态变量。

\n\n

我怀疑你可以通过参考解决这个问题：

\n

const [testVariable, setTestVariable] = useState(false);\nconst reference = useRef();\nreference.current = testVariable;\n

\n

\xe2\x80\xa6 然后让你的函数测试 的值reference.current而不是testVariable。

\n\n

然而，这确实感觉像是一个XY 问题，其中真正的解决方案是“使用您传递给的函数的返回值来useEffect停止您想要停止的任何内容”（并用作testVariable的依赖项useEffect）。

\n