如何在同一函数中更改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

调用setState时，状态不会立即更新。状态将在重新渲染后更新。您可以使用useEffect检查最新状态。

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

Answer 2

如果你读到状态改变机制是如何工作的。该过程本质上是异步的。所以可能会也可能不会立即改变。在这里阅读更多关于它的信息是useState synchronous吗？

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