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

IT技术 javascript reactjs react-hooks
2021-05-24 01:16:06

我试图从父函数调用处理程序，并将更新的状态值作为参数，但是，在调用 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])
2个回答

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

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

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

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

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

setState是一个异步函数，这就是为什么它不会立即更新状态。还有另一种方法，即传递函数 in 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])
其它你可能感兴趣的问题
上一篇react条件渲染 下一篇如何在react-native的父组件中显示一个值？