React：使用useEffect与setInterval每秒向数组添加元素的问题修正

你的代码主要存在三个问题，导致数组无法按预期累加元素：

1. 初始状态错误：useState初始值设成了空数组[]，而非需求的[1, 2]。
2. 闭包陷阱+重复创建定时器：useEffect未设置依赖数组，每次组件因状态更新重渲染时，都会创建新的定时器；且闭包捕获的countList是当前渲染周期的旧快照，导致每次更新都是基于旧数组重新生成，而非最新数组。
3. 计数器初始值错误：counter初始值为0，导致第一次添加的元素是1，不符合从3开始递增的需求。

修复后的代码（方案一：函数式更新+useRef） #

/**
 * init array: [1, 2]
 * Expect
 * array per 1s: [1, 2, 3]
 * array per 2s: [1, 2, 3, 4]
 * array per n s: [1, 2, 3, ..., n+2]
 */
const [countList, setCountList] = useState([1, 2]);
const counter = useRef(2); // 初始值设为2，下一个要添加的元素是3

useEffect(() => {
  const interval = setInterval(() => {
    counter.current += 1;
    // 函数式更新获取最新状态，避开闭包陷阱
    setCountList(prevList => [...prevList, counter.current]);
  }, 1000);

  return () => clearInterval(interval);
}, []); // 空依赖数组，仅组件挂载时创建一次定时器

return (
  <>
    <div>{countList.join(', ')}</div>
  </>
);

更简洁的方案（无需useRef） #

既然每次新增元素都是数组最后一个元素+1，直接基于最新状态计算即可，不需要额外计数器：

const [countList, setCountList] = useState([1, 2]);

useEffect(() => {
  const interval = setInterval(() => {
    setCountList(prevList => [...prevList, prevList.at(-1) + 1]);
  }, 1000);

  return () => clearInterval(interval);
}, []);

return (
  <>
    <div>{countList.join(', ')}</div>
  </>
);

关键修复说明 #

• 函数式更新：setCountList(prevList => ...)确保每次更新都基于最新的数组状态，彻底解决闭包导致的旧状态复用问题。
• 空依赖数组：保证useEffect仅在组件挂载时执行一次，不会重复创建定时器，避免资源浪费和状态混乱。
• 初始状态修正：将useState初始值设为[1, 2]，匹配需求的初始数组。
• 简化渲染逻辑：用join(', ')代替map拼接字符串，避免最后出现多余逗号。

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