React组件每60秒自动请求数据刷新前端图表的实现方法

以下是修正原代码问题、符合非堆积式轮询需求的完整实现：

import { useState, useEffect } from 'react';
import { Container } from '你的组件库引入路径';
import { LineChart } from '你的图表库引入路径';

// 轮询间隔，单位毫秒，可按需调整，示例值5000代表5秒刷新一次
const POLL_INTERVAL = 5000;

function Graph() {
  const [graphData, setGraphData] = useState([]);

  useEffect(() => {
    // 存储定时器ID，用于组件卸载时清理
    let timeoutId = null;

    const fetchGraphData = async () => {
      try {
        const result = await fetch("你的Flask接口实际地址");
        // 修正原代码变量名错误：原代码引用了未定义的res变量，实际响应对象为result
        if (result.ok) {
          const fetchedGraphData = await result.json();
          setGraphData(fetchedGraphData);
        } else {
          // 可在此处自定义接口返回错误状态的处理逻辑
          console.error('接口请求异常，状态码：', result.status);
        }
      } catch (err) {
        // 捕获网络错误、跨域错误等异常，避免轮询意外中断
        console.error('请求失败：', err);
      } finally {
        // 无论请求成功/失败，都在流程结束后等待固定间隔发起下一次请求
        timeoutId = setTimeout(fetchGraphData, POLL_INTERVAL);
      }
    };

    // 组件挂载后立即发起第一次数据拉取
    fetchGraphData();

    // 组件卸载时清理未执行的定时器，避免内存泄漏
    return () => {
      if (timeoutId) clearTimeout(timeoutId);
    };
  }, []);

  return (
    <div>
      <Container>
        <LineChart data={graphData}>
          {/* 原有图表配置内容保持不变 */}
        </LineChart>
      </Container>
    </div>
  );
}

export default Graph;

关键逻辑说明 #

• 轮询逻辑完全封装在useEffect内部，避免闭包引用旧状态/属性导致的逻辑异常
• 递归setTimeout的实现完全符合预期：上一次请求从发起到拿到响应、完成状态更新的全流程走完后，才会开始计时等待下一次请求，从根源上避免setInterval可能引发的请求堆积、响应顺序错乱问题
• finally块保证轮询不会因为单次请求报错、网络异常就中断，可根据业务需求自定义失败后的重试间隔，比如请求失败时延长等待时间到10秒再重试
• useEffect返回的清理函数会在组件卸载（路由跳转、组件被条件渲染隐藏）时自动清除未执行的定时器，避免React抛出「对已卸载组件执行状态更新」的警告，同时减少无效后台请求

可选优化 #

• 需要手动控制轮询启停（比如加暂停/继续按钮）时，可新增一个isPolling状态，在finally块中判断只有isPolling为true时才安排下一次请求
• 数据更新频率高、实时性要求强的场景，可以替换为WebSocket双向通信，相比HTTP轮询性能开销更低
• 可结合AbortController在组件卸载时主动中断还在等待响应的请求，进一步优化性能

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