在 react js 中的钩子（在 async / useState 中）获取结果更新 state 的解决方案

Question

使用 setState 更新后如何正确获取结果 state。 这是我从中获得的代码示例，与我的代码相似为什么在异步 function 中未更新反应挂钩值？ . 但仍然没有解决该问题的答案。 许多帮助会有所帮助。 谢谢

import React, { Component, useState } from "react";
import { render } from "react-dom";

function App() {
 const [value, setValue] = useState('old');

 const run = async() => {
  setValue('new')
  const data = await wait(500)
  console.log(value)
 }

return (
  <button onClick={run}>
    Run
  </button>
);
}

 render(<App />, document.getElementById("root"));

 function wait(ms) {
   return new Promise(resolve => setTimeout(resolve, ms))
 }

Answer 1

你需要使用useEfect像：

     React.useEffect(()=>{
      console.log(value)
    }, [value])

Answer 2

您无法控制 state。 反应控制。 在您要求 React 更改存储的 state 之后，您不应该假设它何时会更新。 也许下一毫秒，也许明年（我夸大其词只是为了说明一点）。 你的组件总是渲染当前的state，所以当 React 最终改变 state 值时，它会重新运行你的组件。 在一次运行中，您将 state 值放入 React 未更新的变量中，因为它是本地的。 它在内部是封闭的，即使 React 想要，它也不能为它不知道的变量分配新值。

由于您的组件是纯粹的（不是真的，但为了简单起见，让我们坚持使用这个术语），您没有副作用。 你可以礼貌地要求 React 对某些事件执行一些副作用——要么是 DOM 事件（比如onClick ，你将副作用放在处理程序的形式中），要么在每个渲染上使用useEffect钩子。 使用 useEffect，您可以限制 react 何时实际运行您的副作用。 使用依赖项数组，您可以说“嘿，React，您能否在初始渲染以及更改此值时运行此副作用”。

综上所述，要跟踪 state 值发生了变化，您还需要一个useEffect挂钩，您可以在其中 100% 确定 state 值发生了变化。 它看起来像这样：

function App() {
  const [value, setValue] = useState("old");

  useEffect(
    function () {
      console.log(value);
    },
    [value]
  );
  const run = async () => {
    setValue("new");
    const data = await wait(500);
    console.log(value);
  };

  return <button onClick={run}>Run</button>;
}

但有时它也只是解决方案的一部分。 有时您只想在依赖值为“新”时运行副作用，而在“旧”时不运行它。 在这种情况下，您可以在效果中添加额外的检查，如果它不是您正在寻找的价值，请提前返回：

function App() {
  const [value, setValue] = useState("old");

  useEffect(
    function () {
      if (value !== "new") return;
      console.log(value);
    },
    [value]
  );
  const run = async () => {
    setValue("new");
    const data = await wait(500);
    console.log(value);
  };

  return <button onClick={run}>Run</button>;
}

虽然这几乎足够了，但通常最好将 state 并绑定到自定义钩子中的 state 效果，或者使用一些专用的“状态管理”解决方案，其中副作用是第一个 class 公民。