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

【问题标题】：How to change useState variable in the same function如何在同一函数中更改 useState 变量
【发布时间】：2020-09-10 20:10:20
【问题描述】：

我有这个变量：

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

单击按钮我执行此功能：

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

userName 变量没有改变，我的输出是：

initialValue
initialValue

但是如果我第二次点击按钮，我得到了输出：

value2
value2

为什么值第一次没有改变？

【问题讨论】：

【解决方案1】：

如果您了解状态更改机制的工作原理。该过程本质上是异步的。所以可能会或可能不会立即改变。在此处阅读更多信息Is useState synchronous?

您也可以使用 useEffect() 挂钩立即查看状态变化。

【讨论】：

【解决方案2】：

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

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

【讨论】：