React图表在apiData未变化时不更新的问题求助

问题原因 #

你的useEffect依赖数组包含apiData，当新获取的apiData值与之前相同时，React会认为依赖没有变化，不会重新执行这个useEffect。这就导致无法添加新的时间点数据到graphData中，图表自然不会更新。

解决方案 #

要确保每次API推送数据（不管值是否重复）都能触发图表更新，你需要添加一个每次数据到达都会变化的触发标识，让useEffect能感知到新数据的到来。

具体修改步骤 #

1. 在父组件中添加一个更新计数器，每次获取API数据时递增它，将其作为props传递给Graph组件
2. 在Graph组件的useEffect依赖数组中加入这个计数器，确保每次数据到达都执行更新逻辑

父组件示例（添加更新触发器）

import React, { useState, useEffect } from 'react';
import Graph from './Graph';

const ParentComponent = () => {
  const [apiData, setApiData] = useState(0);
  const [updateTrigger, setUpdateTrigger] = useState(0);

  // 模拟API数据获取
  const fetchApiData = async () => {
    const response = await fetch('/your-api-endpoint');
    const data = await response.json();
    setApiData(data.value);
    // 每次获取数据都递增触发器，确保useEffect能触发
    setUpdateTrigger(prev => prev + 1);
  };

  // 定时获取数据（根据你的实际场景调整）
  useEffect(() => {
    const interval = setInterval(fetchApiData, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <Graph apiData={apiData} graphLabel="实时数据" updateTrigger={updateTrigger} />
    </div>
  );
};

export default ParentComponent;

Graph组件修改（更新useEffect依赖）

修改Graph组件的useEffect，加入updateTrigger作为依赖，同时移除不必要的setKey逻辑（更新graphData已经会触发组件重新渲染）：

// ... 其他导入和常量保持不变

const Graph = ({ apiData, graphLabel, updateTrigger }) => {
    const { streaming, clearFlag, setClearFlag } = useContext(DataContext);

    const [graphData, setGraphData] = useState(() => {
        const storedData = sessionStorage.getItem('graphData');
        return storedData ? JSON.parse(storedData) : [];
    });

    useEffect(() => {
        if (streaming) {
            setGraphData(prevData => {
                const newData = [
                    ...prevData,
                    { time: new Date().toLocaleTimeString(), data: apiData }
                ];
                // 限制数据点数量
                if(newData.length > MAX_DATA_POINTS){
                    newData.shift();
                }

                sessionStorage.setItem('graphData', JSON.stringify(newData));
                return newData;
            });
        }
    }, [apiData, streaming, updateTrigger]); // 添加updateTrigger到依赖

    // ... 其他代码（dataPoints、clearFlag的useEffect、options等保持不变）

    return (
        <Container>
            <Line data={dataPoints} options={options} />
        </Container>
    );
};

export default Graph;

替代方案（无需修改父组件） #

如果无法修改父组件，你可以在Graph组件内部用useRef跟踪上次的API数据接收时间，结合useEffect监听apiData的变化（即使值相同，只要是新的推送就触发）：

const Graph = ({ apiData, graphLabel }) => {
    const { streaming, clearFlag, setClearFlag } = useContext(DataContext);
    const [graphData, setGraphData] = useState(() => {
        const storedData = sessionStorage.getItem('graphData');
        return storedData ? JSON.parse(storedData) : [];
    });
    const lastDataRef = useRef({ value: apiData, timestamp: Date.now() });

    useEffect(() => {
        const currentTimestamp = Date.now();
        // 即使apiData值相同，只要时间差超过一定阈值（比如100ms），就认为是新的推送
        if (streaming && (apiData !== lastDataRef.current.value || currentTimestamp - lastDataRef.current.timestamp > 100)) {
            setGraphData(prevData => {
                const newData = [
                    ...prevData,
                    { time: new Date().toLocaleTimeString(), data: apiData }
                ];
                if(newData.length > MAX_DATA_POINTS){
                    newData.shift();
                }
                sessionStorage.setItem('graphData', JSON.stringify(newData));
                return newData;
            });
            lastDataRef.current = { value: apiData, timestamp: currentTimestamp };
        }
    }, [apiData, streaming]);

    // ... 其他代码保持不变
};

这个方案通过时间戳判断是否是新的API推送，即使apiData值相同，只要是不同时间的推送就会触发更新。

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