如何在设置值并在之后直接使用时管理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>
);
}

CodeSandbox 1

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

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

编辑：

这里是另一个例子：

CodeSandbox 2

Answer 1

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

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

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

同样相关。