Question

我正在尝试使用更新后的状态值作为参数从父函数调用处理程序，但是，由于两个控制台日志都打印false（初始值），因此在调用setSelected之后状态不会立即更新。但是，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

此行为有两个原因：

状态异步更新
在任何特定的渲染中，状态和道具都不会更改，更改仅在组件重新渲染时反映出来

如果要记录selected的更新值，请将log语句放在useEffect钩子中。您不能在同一渲染器中更新和记录任何状态变量的更新值。组件将不得不重新渲染以反映由于状态更新而引起的更改。同样，如果要使用更新后的值selected调用函数，请从useEffect挂钩内部调用该函数。

Answer 2

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

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])

为什么React setState钩子不立即更新？

2 个答案: