事件处理程序的 Reactjs 关闭问题答案

【问题标题】：Reactjs closure issue with event handlers事件处理程序的 Reactjs 关闭问题
【发布时间】：2022-01-04 16:51:58
【问题描述】：

我是 Reactjs 的新手，我正在做一个项目。

我面临的一个典型场景是事件的处理，以及存储在变量中的值：

let counter = 0;

function clickHandler() {
  counter++;
}

尽管看起来很荒谬，但我一直在 reactjs 中使用这种模式，我得到counter undefined，我可以扭转这种局面的唯一方法是将counter 放入state。我在 codesandbox 中尝试了一个 PoC，一切正常，所以我正在疯狂地试图了解这种奇怪行为的原因。

然后我的问题是：是否有任何典型的反应场景导致函数/处理程序无法正确看到其关闭？

【问题讨论】：

你应该使用React State
你能提供一个代码沙箱中的最小重现示例吗？
此处的代码断章取义，不会产生该错误。提供足够的上下文来复制问题很重要。

标签： javascript reactjs closures

【解决方案1】：

在 react 中执行此操作的典型方法是使用 state。查看 useState 钩子文档https://reactjs.org/docs/hooks-state.html

import { useState } from 'react';

const Component = () => {
  const [counter, setCounter] = useState(0)
  
  const incrementCounter = () => setCounter(counter + 1)
  
  return (
    <button onClick={incrementCounter}>Increment</button>
  )
}

【讨论】：