React中useState与useEffect点击事件状态异常问题咨询

先看你的代码：

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

export function App(props) {
  let [state,setState]=useState(2);
  console.log('outside',state);

  useEffect(()=>{
    document.querySelector('.btn').addEventListener('click',()=>{
      console.log('afterclick',state);
      setState(state-1);
    })

  },[state])

  return (
    <>
      <button className="btn">click me</button>
    </>
  );
}

问题原因拆解 #

1. 重复绑定点击事件

你的useEffect依赖是[state]，每次state变化，useEffect都会重新执行，但你只做了addEventListener，没有移除旧的监听。这意味着：

• 第一次渲染（state=2）：给按钮绑定了第一个点击回调
• 第一次点击后state变为1，组件重新渲染：又给按钮绑定了第二个点击回调
• 此时按钮上同时存在两个点击事件处理器

2. 闭包捕获旧state值

React组件每次渲染时，都会创建新的变量和函数。每个点击回调都是在对应渲染周期内创建的，会捕获当时的state值：

• 第一个回调（state=2时创建）：里面的state永远是2
• 第二个回调（state=1时创建）：里面的state永远是1

第二次点击的输出解析 #

第二次点击按钮时，两个回调会依次触发：

1. 先执行第一个回调：打印afterclick 2，然后调用setState(2-1)，state变为1，组件重新渲染，打印outside 1
2. 接着执行第二个回调：打印afterclick 1，调用setState(1-1)，state变为0，组件重新渲染，打印outside 0

这就是你看到afterclick 2和额外输出的原因。

解决方案 #

推荐三种修复方式，按React最佳实践排序：

方式1：直接在JSX中绑定事件（最推荐）

这是React的标准写法，无需手动操作DOM，自动处理事件绑定/解绑：

import React,{useState} from 'react';

export function App(props) {
  const [state, setState] = useState(2);
  console.log('outside',state);

  const handleClick = () => {
    console.log('afterclick', state);
    setState(state - 1);
  };

  return (
    <>
      <button className="btn" onClick={handleClick}>click me</button>
    </>
  );
}

方式2：给useEffect添加清理函数

如果必须手动操作DOM，一定要在useEffect的清理函数中移除监听，避免重复绑定：

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

export function App(props) {
  const [state, setState] = useState(2);
  console.log('outside',state);

  useEffect(()=>{
    const handleClick = () => {
      console.log('afterclick', state);
      setState(state - 1);
    };
    const btn = document.querySelector('.btn');
    btn.addEventListener('click', handleClick);
    
    // 清理函数：组件卸载或依赖变化时移除监听
    return () => btn.removeEventListener('click', handleClick);
  }, [state])

  return (
    <>
      <button className="btn">click me</button>
    </>
  );
}

方式3：函数式更新+空依赖useEffect

如果不需要在回调中打印state，或者想直接获取最新state，可以用函数式更新，同时把useEffect依赖设为空数组（只绑定一次事件）：

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

export function App(props) {
  const [state, setState] = useState(2);
  console.log('outside',state);

  useEffect(()=>{
    const handleClick = () => {
      setState(prevState => {
        console.log('afterclick', prevState);
        return prevState - 1;
      });
    };
    const btn = document.querySelector('.btn');
    btn.addEventListener('click', handleClick);
    
    return () => btn.removeEventListener('click', handleClick);
  }, []) // 空依赖：只执行一次绑定

  return (
    <>
      <button className="btn">click me</button>
    </>
  );
}

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