图表未显示更新的数据答案

【问题标题】：Chart is not displaying updated data图表未显示更新的数据
【发布时间】：2021-07-25 13:20:37
【问题描述】：

我用过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, 99, 132, 0.2)",
            yAxisID: "y-axis-1",
        },
        {
            label: "# of Orders",
            data: [0, 25, 50, 76, 101, 126, 151, 177, 202, 227],
            fill: false,
            backgroundColor: "rgb(54, 162, 235)",
            borderColor: "rgba(54, 162, 235, 0.2)",
            yAxisID: "y-axis-2",
        },
    ],
};

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

任何人都可以帮助我！提前谢谢你！

【问题讨论】：

如何更新数据？
如果可能，请提供您的代码。
为图表组件提供密钥并在数据更新后更新密钥
@yahyaparvar，我有一个下拉菜单，在项目选择中，我在 graphData 的 setGraphdata 中设置了数据。我在定义和初始化时分配了默认数据。我正在创建它的副本，然后分配。
@CharchitKapoor 是的，我已经更新了我的问题！

标签： reactjs charts react-chartjs rerender react-chartjs-2

【解决方案1】：

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

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

get 键将创建一个与新数据相关的唯一键。

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

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

【讨论】：

我已经用一些代码更新了我的问题，我也尝试过使用 getKey()。收到错误为“TypeError：data.map 不是函数”。
@RHF 尝试使用
谢谢，帮我调试和检查数据。
这解决了我在图表数据渲染中的问题。您能否更新您的答案，以便我可以将其作为解决方案答案进行检查！
@RHF 我已经在回答中提到了它。阅读最后一段

【解决方案2】：

重新渲染背后的问题是定义为调用、后端 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"
 />

【讨论】：