在react js中获取挂钩（异步/useState内部）中结果更新状态的解决方案

Question

如何使用setState在更新后正确获取结果状态。下面是我从中得到的代码示例，它与我的代码类似，为什么在异步函数中不更新react hook值。但仍然没有解决这个问题的办法。很多帮助都会有帮助。非常感谢。

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

你不能控制国家。反应控制。在您要求对更改存储状态作出反应后，您不应假定它将在何时更新。也许下一毫秒，也许下一年（我只是为了说明一点而夸大）。您的组件始终呈现当前状态，因此当React最终更改状态值时，它将重新运行您的组件。在一次运行中，您将状态值放入React不会更新的变量中，因为它是本地的。它是封闭的内部效应，即使需要反应，它也不能将新值赋给它不知道的变量。

因为您的组件是纯的（不是真的，但为了简单起见，让我们坚持使用这个术语），所以您不会有副作用。您可以礼貌地要求React对某些事件执行一些副作用—DOM事件（如onClick以处理程序的形式放置副作用），或者使用useffect钩子对每个渲染执行副作用。使用useEffect，您可以限制react实际运行副作用的时间。使用dependencies数组，您可以说“嘿，React，能否请您在初始渲染和更改此值时运行此副作用？”。

总而言之，要跟踪状态值的变化，您还需要一个useffecthook，您可以100%肯定地说状态值发生了变化。它将如下所示：

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>;
}

虽然这几乎是足够的，但通常最好将状态和与所述状态效果联系在一起，或者使用一些专门的“状态管理”解决方案，其中副作用是一流的公民。