为什么React setState钩子没有立即更新

Question

我正试图用更新的状态值作为参数从父函数调用处理程序，但是，在调用setSelected之后，状态不会立即更新，因为两个控制台日志都打印false(初始值(。然而，在onClick功能完成后，它会被更新。

onClick={() => {
console.log("Clicked: ", props.rank, props.suit, selected); 
setSelected(!selected)
console.log("selected: ", selected)
// props.handle_card_selected(props.id, selected)
}}

useEffect(() => {
const check_border = () => {
if (selected) {
return "green"
}
return "black"
}
check_border()
}, [selected])

Answer 1

关于React中的状态更新，您需要了解两件事：

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

如果要记录selected的更新值，请将log语句放在useEffect挂钩中。

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

类似地，如果要调用更新值为selected的函数，请从useEffect钩子内部调用该函数。

Answer 2

setState是一个异步函数，这就是它不立即更新状态的原因。还有另一种方法，即setSelected中的传递函数，通过它可以实现所需的行为：

onClick={() => {
console.log("Clicked: ", props.rank, props.suit, selected); 
setSelected(prevSelected => {
// props.handle_card_selected(props.id, !prevSelected)
return !prevSelected
})
}}
useEffect(() => {
props.handle_card_selected(selected)
}, [selected, props.handle_card_selected])