如何在同一函数中更改useState变量

Question

我有这个变量：

const [userName, setUserName] = useState<string>("initialValue");

单击按钮，我将执行此功能：

const FacebookSign = () => {
    console.log(userName);
    setUserName("value2");
    console.log(userName);
}

userName变量不变，我的输出是：

initialValue
initialValue

但是，如果我第二次按下按钮，则会得到输出：

value2
value2

为什么值第一次不更改？

Answer 1

如果您了解状态更改机制的工作原理。该过程本质上是异步的。因此，可能会立即更改，也可能不会立即更改。在这里Is useState synchronous?

了解更多信息

还可以使用useEffect（）挂钩立即查看状态更改。

Answer 2

调用setSate时，the state is not updated immediately。重新渲染后，状态将被更新。 您可以使用useEffect来检查最新状态。

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