图表未显示更新的数据

问题描述

我用过https://www.npmjs.com/package/react-chartjs-2，它第一次显示了一个有数据的图表。但是每当我尝试使用新数据和数据集重新绘制时，它总是在图表上显示以前的图形数据。

我尝试过以下解决方案：https://github.com/reactchartjs/react-chartjs-2

也尝试给参考

但是，它仍然显示了它第一次加载的相同数据。

显示图表的代码，

 <Line
      data={graphData}
      redraw
      options={options}
      height="100px"
      weight="100px"
 />

在这方面， graphData 是， const [graphData,setGraphData] = useState(data);

重绘， 我也试过，redraw={true}

当数据会被修改时，我使用setGraphData(updatedData)来更新图表，我也检查了数据是否发生了变化。

graphData 中的数据更新但未显示在图表上

其中指定为graphData的默认数据的数据，

const data = {
    labels: months,datasets: [
        {
            label: "# of Users",data: [0,64,129,193,258,322,387,451,516,580],fill: false,backgroundColor: "rgb(255,99,132)",borderColor: "rgba(255,132,0.2)",yAxisID: "y-axis-1",},{
            label: "# of Orders",25,50,76,101,126,151,177,202,227],backgroundColor: "rgb(54,162,235)",borderColor: "rgba(54,235,yAxisID: "y-axis-2",],};

我正在创建此数据的副本，然后在 setGraphData() 中进行分配

任何人都可以帮我解决这个问题！提前谢谢你！！

解决方法

没有看到代码，这里只有一个解决方案。提供图表组件的密钥并在数据更新后更新密钥，

<chart key={getKey()} data={data} />

get 键将为新数据创建一个唯一的键。

  const getKey = () => {
    return data?.map((p) => p.id)?.join();
  };

这里唯一重要的是，如果数据更新，getKey 方法应该返回一个新值 JSON.stringify(data) 是最简单的选项（我不确定将序列化数据作为键提供是否是一个好方法，但肯定会起作用）

,

重新渲染背后的问题是一个定义为调用、后端 API 处理程序和将数据分配给折线图的函数。

之前 - 不工作

useEffect(() => {
      ...
      the function which has code to call and fetch data from back-end API/handler
    },[]);

之后 - 工作

useEffect(() => {
       ...
       Code which calls back-end API/handler function to fetch data for graph
       ...
    },[]);

我也一直保持重绘，

<Line
     key={JSON.stringify(graphData)}
     data={graphData}
     redraw
     options={options}
     height="100px"
     weight="100px"
 />