时间戳

首页 > 解决方案 > 为什么 React setState hook 没有立即更新？

javascript - 为什么 React setState hook 没有立即更新？

问题描述

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

标签： javascriptreactjsreact-hooks

解决方案

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

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

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

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

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

推荐阅读