React中useState更新失效求助：键盘事件无法更新clickCounter

你的代码里setClickCounter无法正确更新值，核心问题是闭包陷阱，再加上useEffect的使用和事件清理存在疏漏，下面是具体修复方案：

核心问题拆解 #

• 闭包导致旧值引用：keyPressed函数里的clickCounter是组件首次渲染时的快照，每次触发事件都会用这个旧值计算，所以永远是1+1=2，无法累加。
• useEffect缺少依赖数组：没写依赖的话会每次渲染都执行，虽然用了initialRender控制，但逻辑冗余且容易出问题。
• 事件清理错误：移除事件时应该从绑定的typingSection元素上移除，而且你只清理了keypress，没清理keyup。
• DOM元素获取不够React化：用document.querySelector不如用useRef直接绑定DOM节点，更符合React的组件模型。

修复后的代码 #

import { useState, useEffect, useRef } from 'react';

function YourComponent() {
  const [clickCounter, setClickCounter] = useState(1);
  const typingSectionRef = useRef(null); // 用useRef绑定DOM元素

  const keyPressed = (e) => {
    e.preventDefault();
    // 使用函数式更新，获取最新的state值
    setClickCounter(prevCounter => prevCounter + 1);
    console.log(e.key, clickCounter); // 这里的clickCounter是旧值，要查看最新值可在组件内直接显示或用useEffect监听
  };

  const keyReleased = (e) => {
    // 这里可添加keyup的逻辑
  };

  useEffect(() => {
    const typingSection = typingSectionRef.current;
    if (!typingSection) return;

    // 绑定事件
    typingSection.addEventListener("keypress", keyPressed);
    typingSection.addEventListener("keyup", keyReleased);

    // 清理函数：移除所有绑定的事件
    return () => {
      typingSection.removeEventListener("keypress", keyPressed);
      typingSection.removeEventListener("keyup", keyReleased);
    };
  }, []); // 空依赖数组，只在组件挂载时执行一次

  return (
    <div>
      {/* 把ref绑定到输入区域 */}
      <div className="typing-section" ref={typingSectionRef} contentEditable>
        输入区域
      </div>
      <p>按键次数：{clickCounter}</p>
    </div>
  );
}

关键修改说明 #

• 函数式更新state：用setClickCounter(prevCounter => prevCounter + 1)替代原写法，每次更新都会基于最新的state值计算，避开闭包陷阱。
• 使用useRef获取DOM：通过useRef直接绑定目标元素，不需要document.querySelector，更安全且符合React生命周期逻辑。
• 完善useEffect逻辑：空依赖数组确保事件只在组件挂载时绑定一次，清理函数移除所有绑定的事件，避免内存泄漏。
• 移除冗余状态：不需要initialRender来控制事件绑定，空依赖的useEffect已能实现只执行一次的效果。

如果需要查看最新的clickCounter值，可在组件内添加监听：

useEffect(() => {
  console.log("最新按键次数：", clickCounter);
}, [clickCounter]);

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