如何在设置值并在之后直接使用它时管理 useState 钩子的异步性质

Question

我是 React 的新手，无法真正理解如何正确使用 useState 钩子。

export default function App() {
  const [name, setName] = useState("noname");

  const updateAndLogName = () => {
    setName("Alex");
    console.log(name); // first time => "noname"
  };

  return (
    <div className="App">
      <button onClick={() => updateAndLogName()}>
        Click me to change and log name in console
      </button>
    </div>
  );
}

代码沙盒 1

我调用了一个更新值的方法，然后直接使用更新后的值。 但是由于 setName 函数是异步的，所以我在 console.log 中获得了原始值，并且必须等到 React 更新了该值才能获得正确的结果。

在这个简化的示例中，我可以将该值作为函数参数并在 setName 和 console.log 中使用它，也许这就是它应该完成的方式，但是还有其他首选方法来处理这种情况吗？

编辑：

这是另一个例子：

代码沙盒 2

Answer 1

在这个简化的示例中，我可以将该值作为函数参数并在 setName 和 console.log 中使用它，也许应该这样做

如果您不想等待另一个渲染，这是一种方法。 如果等待渲染没问题，另一种方法可能是：

useEffect(()=>{
  console.log("Will get here anytime name changes", name);
}, [name])

也有 关系。