React使用useInterval时无法在joke数组存满5条后清除定时器的问题

问题根因 #

现有代码的核心错误有3个：

• 闭包陷阱：setJoke 直接使用当前作用域下的joke变量，由于定时器回调捕获的是初始渲染时的joke（空数组），导致永远无法正确累加出长度为5的数组，且日志打印的joke永远是旧值
• 定时器id错乱：你在useInterval函数作用域内声明的let id无法在两个useEffect之间共享正确的定时器实例，第一个useEffect里清除的id根本不是实际生效的定时器id
• 自定义Hook耦合外部状态：useInterval内部直接读取外部的joke状态，不符合自定义Hook的封装原则，也会触发不必要的依赖警告

修正方案 #

采用标准化的useInterval实现（支持传入null作为delay直接停止定时器），配合状态更新时的函数式写法解决问题，修正后完整代码如下：

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

export default function AutoComplete() {
  const [joke, setJoke] = useState([]);

  // 标准化useInterval实现，支持delay为null时停止定时器
  function useInterval(callback, delay) {
    const savedCallback = useRef();
    // 保存最新的回调避免闭包问题
    useEffect(() => {
      savedCallback.current = callback;
    });

    useEffect(() => {
      // delay为null时直接返回不启动定时器
      if (delay === null) return;
      function tick() {
        savedCallback.current();
      }
      const id = setInterval(tick, delay);
      return () => clearInterval(id);
    }, [delay]);
  }

  // 当joke长度达到5时，delay设为null自动停止定时器
  useInterval(() => {
    axios.get("https://api.chucknorris.io/jokes/random").then((res) => {
      // 用函数式更新获取最新的joke状态，避免闭包问题
      setJoke(prevJoke => {
        const newJoke = prevJoke.concat(res.data.value);
        console.log("JOKE: ", newJoke);
        return newJoke;
      });
    });
    console.log("Every 5 seconds");
  }, joke.length < 5 ? 5000 : null);

  // 渲染逻辑可按需扩展
  return <div>{joke.map((item, idx) => <p key={idx}>{item}</p>)}</div>
}

核心改动说明 #

• 重写useInterval，传入null作为delay时会直接停止定时器，无需手动在Hook内部判断业务状态
• setJoke改用函数式更新，每次都能拿到上一次的最新joke状态，规避闭包陷阱
• 把停止定时器的判断放到useInterval的delay参数里，逻辑更清晰，符合Hook的使用规范

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