React组件状态更新异常：重置后状态莫名恢复问题咨询

核心问题 #

1. 闭包陷阱：你直接在组件内给window.onload绑定事件，这个事件回调里的foo函数是组件首次渲染时创建的，它捕获的是当时的state引用。即使后续调用resetState更新了state，旧的事件回调依然会使用首次渲染时捕获的旧state，导致看起来resetState没生效。
2. 代码错误：foo函数里的temp是未定义变量，应该替换为state，否则代码本身就无法正常运行。
3. 事件绑定逻辑错误：window.onload是页面加载完成的事件，无法监听按键操作，应该改用keydown事件，且直接绑定会导致组件重复渲染时多次绑定事件，引发异常。

修复后的代码 #

function myComponent() {
  const [state, setState] = useState([]);

  useEffect(() => {
    console.log(state);
  }, [state]);

  // 使用函数式更新，确保每次都拿到最新的state
  function foo(data) {
    setState(prevState => [data, ...prevState]);
  }

  function resetState() {
    setState([]);
  }

  // 用useEffect绑定/解绑键盘事件，避免闭包和内存泄漏
  useEffect(() => {
    function handleKeyDown(event) {
      if (event.key === "r") {
        foo([1]);
      }
    }
    window.addEventListener("keydown", handleKeyDown);
    // 组件卸载时解绑事件
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, []);

  return <button onClick={resetState}>重置状态</button>;
}

关键修复点 #

• 函数式更新setState：通过prevState获取最新的状态值，彻底规避闭包带来的旧状态引用问题，无论何时调用foo，都能基于当前最新的state进行更新。
• 正确绑定键盘事件：使用useEffect在组件挂载时绑定keydown事件，卸载时解绑，既保证事件只绑定一次，也避免了重复绑定导致的异常。
• 修正未定义变量：把foo里的temp替换为函数式更新里的prevState，保证逻辑正确性。

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