React函数组件中如何存储每5秒更新的旧数据并展示？

你遇到的核心问题是闭包导致的state引用过期——在定时的API请求中，直接使用setState传值时，拿到的currentData可能是组件初始化时的旧值，而非最新的状态。解决这个问题的关键是用函数式更新来操作state，确保每次更新都基于最新的状态值。

具体实现方案 #

我们可以维护两个状态：一个存储最新的API数据，另一个存储上一次（或历史）的分数组。下面是完整的代码示例：

import { useState, useEffect } from 'react';

function ScoreDisplay() {
  // 存储最新的API返回数据
  const [currentData, setCurrentData] = useState(null);
  // 存储上一次更新的分数组，初始值设为空数组
  const [previousScores, setPreviousScores] = useState([]);

  // 封装API请求逻辑
  const fetchLatestData = async () => {
    try {
      const response = await fetch('你的API接口地址');
      const newData = await response.json();

      // 先把当前的分数存入历史状态——用函数式更新确保拿到最新的currentData
      if (currentData?.scores) {
        setPreviousScores(() => currentData.scores);
      }

      // 更新最新数据状态
      setCurrentData(newData);
    } catch (error) {
      console.error('数据请求失败:', error);
    }
  };

  // 初始化请求 + 定时更新
  useEffect(() => {
    // 首次加载时拉取数据
    fetchLatestData();
    // 每5秒执行一次请求
    const updateInterval = setInterval(fetchLatestData, 5000);

    // 组件卸载时清理定时器，避免内存泄漏
    return () => clearInterval(updateInterval);
  }, []);

  return (
    <div className="score-container">
      <h3>当前最新分数</h3>
      <ul>
        {currentData?.scores?.map((score, index) => (
          <li key={index}>{score}</li>
        ))}
      </ul>

      <h3>上一次更新的分数</h3>
      <ul>
        {previousScores.map((score, index) => (
          <li key={index}>{score}</li>
        ))}
      </ul>
    </div>
  );
}

export default ScoreDisplay;

关键细节说明 #

1. 函数式更新的作用：如果需要累积所有历史分数（而不只是上一次），可以把更新逻辑改成：

   setPreviousScores(prevState => [...prevState, currentData.scores]);
   

   这样每次新数据到来时，都会把当前分数追加到历史列表中。
2. 闭包问题规避：定时任务中的函数会捕获组件初始渲染时的state值，用函数式更新可以绕开这个问题，确保每次操作的都是最新的state。
3. 边界处理：第一次请求时currentData为null，所以加了currentData?.scores的判断，避免报错，你可以根据实际业务调整初始值和判断逻辑。

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