为啥 React setState hook 没有立即更新？ [复制]

Posted 2023-02-21

【中文标题】为啥 React setState hook 没有立即更新？ [复制]

【英文标题】：Why is React setState hook not updating immediately? [duplicate]为什么 React setState hook 没有立即更新？ [复制]

【发布时间】：2020-11-04 02:18:51

【问题描述】：

我正在尝试使用更新的状态值作为参数从父函数调用处理程序，但是，在调用 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])

【问题讨论】：

拜托，see this。

【参考方案1】：

关于 React 中的状态更新你需要知道的两件事：

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

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

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

同样，如果您想调用更新值为selected 的函数，请从useEffect 挂钩内部调用该函数。

【参考方案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])

【讨论】：

功能更新更适合 OP 的尝试，但如果他想调用一个函数，他可以使用 useEffect 来做到这一点。

状态更新功能不应该有副作用。这是一个不好的做法。如有必要，请使用 useEffect 之类的内容。

是的，你是对的。