React变量值无法更新：修改后跨函数打印值始终不变

问题原因 #

你定义的let text = 'Hello World'是普通变量，React组件每次渲染都会重新执行函数体，这个变量会被重新初始化。同时handleClick是在组件初始渲染时通过updateTextArray绑定的，闭包捕获了当时的text值（'Hello World'）——之后即使handleStart修改了text，也只是修改了当前渲染周期的变量，不会更新闭包里的旧值，所以点击时始终打印初始值。

解决方案 #

方案1：使用useState（需触发UI更新场景） #

把普通变量换成React状态变量，通过setter修改状态触发组件重渲染，让闭包捕获更新后的状态值：

// 替换原有的let text = 'Hello World'
const [text, setText] = useState('Hello World');

const handleStart = () => {
  // 用setText修改状态，触发组件重渲染
  setText('loaded');
  // 其他逻辑...
};

const handleClick = (index) => {
  console.log(text);
  if (!isStarted) return;
  // 其他逻辑...
};

同时建议去掉task状态和对应的useEffect，直接在render中渲染按钮，避免闭包捕获旧值：

return (
  <div>
    <div className="grid-container">
      {[1,2,3,4,5,6,7,8,9].map((button, index) => (
        <div
          className="grid-item"
          key={index}
          ref={ref => (pRef.current[index] = ref)}
          onClick={() => handleClick(index, game)}
        ></div>
      ))}
    </div>
    <div>
      <button onClick={handleStart}>Start</button>
    </div>
  </div>
);

方案2：使用useRef（无需触发UI更新场景） #

如果修改text不需要触发组件UI更新，仅需在点击时获取最新值，用useRef存储变量：

// 替换原有的let text = 'Hello World'
const textRef = useRef('Hello World');

const handleStart = () => {
  // 修改ref的current属性，不会触发重渲染
  textRef.current = 'loaded';
  // 其他逻辑...
};

const handleClick = (index) => {
  // 访问current属性获取最新值
  console.log(textRef.current);
  if (!isStarted) return;
  // 其他逻辑...
};

useRef的current属性是可变的，不会在组件渲染时重置，所有渲染周期共享同一个引用，因此能始终拿到最新值。

内容的提问来源于stack exchange，提问作者Taxtra