javascript - react 中的异步功能不会对状态变化使用react

Question

我想要我的 aysnc function对状态变化使用react，以便它可以在状态变化时终止。我发现它对改变状态没有反应。
在提供的示例中，我正在从函数内部更改状态，但是我已经对其进行了测试并更改了状态 从函数外部 (按钮点击)它也不起作用 .

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 声明它们，因为它们不会改变)。
组件函数的后续调用将获得一个具有相同名称和不同值的新状态变量。
您的 testFunction函数已关闭旧状态变量。

我怀疑你可以通过引用解决这个问题:

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

… 然后让你的函数测试 reference.current 的值而不是 testVariable .

然而，这确实像 XY Problem真正的解决方案是“使用您传递给 useEffect 的函数的返回值来停止您想要停止的任何内容”(并使用 testVariable 作为 useEffect 的依赖项)。