React中useEffect内setInterval触发两次的问题排查

核心原因分析&解决思路 #

1. 定时器重复注册（最常见）

空依赖的useEffect仅在组件挂载时执行一次，但如果组件因其他状态更新（比如添加顾客触发重渲染）意外卸载再挂载，或是你没在useEffect中添加定时器清理逻辑，就会同时存在多个setInterval实例——每个定时器每秒执行一次减1操作，最终表现为每秒减2。

解决方法：给useEffect添加清理函数，确保组件卸载/重渲染前清除定时器：

useEffect(() => {
  const timer = setInterval(() => {
    // 你的队列更新逻辑
  }, 1000);
  // 清理定时器
  return () => clearInterval(timer);
}, []);

2. 多组件重复处理状态逻辑

如果CheckoutLine组件内部也写了商品数减少的逻辑（比如单独加了定时器），那么Shop和CheckoutLine会同时对同一队列的顾客执行减1操作，导致每秒减2。

解决方法：把状态更新逻辑统一放在Shop组件，CheckoutLine仅负责接收队列数据并渲染，不处理任何状态变更。

3. 状态更新未用函数式写法导致闭包问题

如果你的状态更新直接依赖当前state值，空依赖useEffect里的回调会一直捕获初始state，可能触发重复更新（部分场景下表现为每秒多次减1）。

解决方法：用函数式更新确保每次基于最新状态修改：

setCheckoutlineToShoppers(prevLines => {
  return prevLines.map(line => {
    if (line.length === 0) return line;
    // 复制数组和对象，避免直接修改原state
    const updatedLine = [...line];
    const updatedShopper = {...updatedLine[0]};
    
    updatedShopper.items -= 1;
    if (updatedShopper.items === 0) {
      updatedLine.shift(); // 移除已结账顾客
    } else {
      updatedLine[0] = updatedShopper;
    }
    return updatedLine;
  });
});

排查验证步骤 #

1. 在定时器回调里加console.log('执行减1操作')，查看每秒打印次数，如果是2次，说明存在多个定时器。
2. 检查CheckoutLine组件代码，确认没有额外的定时器或修改商品数的逻辑。
3. 确认所有状态更新都使用函数式写法，避免闭包捕获旧state。

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