React中点击按钮调用setPage后page状态未更新的问题排查

问题根源 #

你的代码存在两个核心问题：

1. 事件绑定时机单一：useEffect依赖为空数组，只会在组件首次挂载时执行一次事件绑定。如果按钮是动态生成的（比如后续渲染出来的），这些新按钮不会被绑定点击事件；即使按钮是静态的，也可能因闭包或DOM更新导致状态更新异常。
2. 不符合React状态管理逻辑：直接通过原生addEventListener绑定DOM事件，脱离了React的声明式渲染流程，容易出现状态与DOM不同步的问题，还可能引发内存泄漏。

解决方案 #

方案1：使用React原生事件绑定（推荐）

如果按钮是你用JSX渲染的，直接在按钮上声明onClick事件，这是React的标准写法，能自动处理事件绑定、更新和清理：

import { useState } from 'react';

const YourComponent = () => {
  const [page, setPage] = useState<number>(1);

  const handlePageClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    const pageNum = parseInt(e.currentTarget.textContent ?? "1");
    setPage(pageNum);
    setTimeout(() => {
      setTimeout(() => {
        // 无关代码
      }, 10);
    }, 200);
  };

  return (
    <div>
      {/* 示例按钮，根据实际场景渲染 */}
      <button onClick={handlePageClick}>1</button>
      <button onClick={handlePageClick}>2</button>
      <button onClick={handlePageClick}>3</button>
    </div>
  );
};

方案2：事件委托（针对非React渲染的按钮）

如果按钮不是通过React渲染的（比如第三方组件生成的DOM），可以用事件委托的方式绑定到父元素（或document），确保动态生成的按钮也能触发事件，同时添加清理函数避免内存泄漏：

import { useState, useEffect } from 'react';

const YourComponent = () => {
  const [page, setPage] = useState<number>(1);

  useEffect(() => {
    const handleGlobalClick = (e: MouseEvent) => {
      const target = e.target as HTMLButtonElement;
      // 只处理按钮元素的点击
      if (target.tagName === 'BUTTON') {
        const pageNum = parseInt(target.textContent ?? "1");
        setPage(pageNum);
        setTimeout(() => {
          setTimeout(() => {
            // 无关代码
          }, 10);
        }, 200);
      }
    };

    document.addEventListener('click', handleGlobalClick);

    // 组件卸载时移除事件监听
    return () => {
      document.removeEventListener('click', handleGlobalClick);
    };
  }, []);

  return <div>{/* 组件内容 */}</div>;
};

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