React useEffect完全不触发求助：秒数计数器无法正常执行

核心错误 #

你完全用错了useEffect的第二个参数——它是依赖数组，用来控制effect什么时候重新执行，不是定时器的延时时间。你传了1000这个数字，导致React执行逻辑混乱，这就是effect没按预期触发的根本原因。另外，就算依赖写对了，直接用setCounter(counter + 1)也会有闭包问题，导致计数器无法持续递增。

修复后的代码 #

const LookForRanked = () => {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    // 用setInterval创建每秒执行的定时器
    const timer = setInterval(() => {
      // 用函数式更新获取最新状态，避免闭包陷阱
      setCounter(prevCounter => prevCounter + 1);
      console.log(counter);
    }, 1000);

    // 组件卸载时清理定时器，防止内存泄漏
    return () => clearInterval(timer);
  }, []); // 空数组表示只在组件挂载时执行一次effect

  return (
    <div className="time-searching">Searching: {counter} sec</div>
  );
};

export default LookForRanked;

关键说明 #

• 依赖数组的正确用法：空数组[]表示effect只在组件挂载时执行一次，卸载时执行清理函数；如果需要在特定变量变化时重新执行effect，就把变量放进数组里（比如[counter]）。
• 函数式更新状态：使用setCounter(prev => prev + 1)而非setCounter(counter + 1)，能确保每次都基于最新的状态值更新，不会因为闭包捕获旧值导致计数停滞。
• 清理定时器：必须在effect的返回函数里清除定时器，否则组件卸载后定时器还会继续运行，造成内存泄漏。

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