为什么用 react-chartjs-2 只更新了一张三张图表？

Question

原来我有一个模态，其中包含一个记录数值的文本字段。然后记录的值通过循环传递，以使用文本字段中记录的数量填充排列。在此之后，这些值将发送到 3 个图表，以便更新您的数据。

出现的问题是只更新了最后一张图。我不知道发生了什么，因为似乎其他图形如果我们收到了值，但没有更新它们。

我正在使用 material-ui 和 react-chartjs-2。

请能帮助我的人。这里我将代码留在 StackBlitz 中，看看它是如何工作的。

Code in StackBlitz

Answer 1

我对您的代码进行了一些操作，似乎在 chart.js 文件中，您需要将您的 var chartReference 移动到您的主函数 (function charts()) 中，以便所有三个都更新。

export default function charts(props) {
  var chartReference = {};
  useEffect (() => {
...

我的猜测是，当您的 chartReference 在函数之外时，它最终只会引用您的一个图表。