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

如果您阅读有关状态更改机制如何工作的信息。该过程本质上是异步的。因此可能会也可能不会立即改变。在此处阅读更多相关信息 使用状态是同步的吗？

你也可以使用 useEffect(( 钩子来立即查看状态变化。

Answer 2

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

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