React中clearInterval()无法清除定时器问题求助

你的代码有两个核心问题导致定时器无法被清除：

1. useEffect的依赖数组是空的，意味着这个副作用只会在组件挂载时执行一次。此时users初始值为40，if (users >= 5000)的条件永远不满足，清除定时器的逻辑根本不会触发。
2. 定时器回调里只做了数值递增，没有判断是否达到5000的阈值，也没在数值达标后主动清除定时器。

下面是调整后的代码，解决了上述问题：

const Cards = () => {
  const [users, setUsers] = useState(40);
  // 用useRef保存定时器ID，确保组件生命周期内可访问同一引用
  const intervalRef = useRef(null);

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      setUsers((prevUsers) => {
        const newUsers = prevUsers + 100;
        // 判断新数值是否达到阈值
        if (newUsers >= 5000) {
          clearInterval(intervalRef.current);
          // 返回5000作为最终值，避免超出
          return 5000;
        }
        return newUsers;
      });
    }, 200);

    // 组件卸载时清除定时器，防止内存泄漏
    return () => {
      clearInterval(intervalRef.current);
    };
  }, []);

  return <div>number of users {users}</div>;
};

• 用useRef存储定时器ID：即使组件重新渲染，也能拿到同一个定时器引用，确保可以正确清除。
• 在setUsers回调内判断阈值：每次计算新用户数时先检查是否达标，达标就立即清除定时器并返回最终值。
• 添加组件卸载清理逻辑：避免组件卸载后定时器仍在后台运行，造成内存泄漏。

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