事件处理程序内部未更新反应状态答案

【问题标题】：React state not updated inside event handler事件处理程序内部未更新反应状态
【发布时间】：2021-11-02 20:10:57
【问题描述】：

我有一个状态变量来确定按钮是否被渲染。按钮的 onclick 处理程序切换状态并应该删除按钮。但是状态永远不会在事件处理程序中更新（在 Safari 中由于上帝的力量而正常工作）。所有其他函数调用都可以正常工作。但是状态永远不会更新，即使有延迟也不会更新（在 devtools 中检查）。它看起来像..

const [shown, setShown] = useState(true)

return (
  shown ? (
    <button
      onClick={(ev) => {
        console.log(shown) // outputs true
        setShown(false) // does absolutely nothing, no errors
        console.log(shown) // outputs true
      }}
    ></button>
  ) : (
    <OtherElement />
  )
)

我猜这是一个简化版本。我通过将 onClick 更改为“解决”了这个问题

onClick={ () => 
  setTimeout(
    setShown.bind(undefined, false)
  ,0)
}

我不确定这是否理想。有什么想法吗？

【问题讨论】：

我在下面回答了您的问题，如果有帮助请标记为已回答

标签： javascript reactjs react-hooks jsx

【解决方案1】：

这是因为 React 批处理 setState 尝试使用处理函数并添加 useEffect 像这样

useEffect(()=>{ console.log("Shown Chnaged") },[shown])

当你设置状态时，由于 React 的批处理机制，它不会立即重新渲染

更多内容请参考this文章

【讨论】：

现在更奇怪了。如果我添加 useEffect，则单击按钮时效果会运行。但是状态仍然没有更新（在 devtools 中），UI 也没有。如果我在效果内使用 console.log(shown)，它会输出 true/false 的交替值，即使处理程序始终只将状态设置为 false。
我做了一个示例应用程序，参考here，它按预期工作，价值不交替
代码中可能有其他东西影响了这一点。我会将其标记为已回答，因为这解决了我发布的代码。感谢您的示例和一切。