javascript - 为什么异步函数中没有更新 react Hook 值？

Question

这个问题在这里已经有了答案:





The useState set method is not reflecting a change immediately

(15 个回答)


2年前关闭。




运行 时运行函数，我希望 值(value) 变量的值是“新的”，但即使是 500 毫秒，它仍然是“旧的”。为什么会发生这种情况以及如何解决这个问题？

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

setState 异步运行，因此不会立即反射(reflect)在功能代码块中。你可以尝试使用 useEffect 来观察你的状态变化。
useEffect(() => console.log('value', value), [value])