为什么setState不更新我的状态值?

Question

function LoginComponent(){
const [clicked, setClicked] = useState(false)

function handleClick(){
console.log('before', clicked)
setClicked(true)
console.log('after', clicked)
}
return(
<a onClick={handleClick}>
random text
</a>
)
}

当我运行这个命令时，控制台在false之前输出false之后输出false。为什么会这样?我不知道为什么这个行为是这样的。

Answer 1

因为设置状态是异步操作。更新需要一些时间。查看react文档链接了解更多

可以通过

查看更新后的值

useEffect(()=> { 
console.log("clicked", clicked);
},[clicked]);

Answer 2

这种行为有以下几个原因:

• 状态异步更新
• 在任何特定的渲染中，状态和道具不会改变，只有当组件重新渲染时才会反映变化

如果要记录clicked的更新值，则将日志语句放在useEffect钩子中。

你不能在同一个渲染中更新和记录任何状态变量的更新值。组件将不得不重新渲染以反映由于状态更新而产生的更改。

同样，如果你想用更新后的clicked值调用一个函数，从useEffect钩子内部调用该函数。

Answer 3

setClicked是异步的。您必须检查useEffect

中更新的状态。

function LoginComponent(){
const [clicked, setClicked] = useState(false)

function handleClick(){
setClicked(true)
}
useEffect(() => {
console.log(clicked);
},[clicked])
return(
<a onClick={handleClick}>
random text
</a>
)
}