為什么用 react-chartjs-2 只更新了一張三張圖表？

Question

原來我有一個模態，其中包含一個記錄數值的文本字段。 然后記錄的值通過循環傳遞，以使用文本字段中記錄的數量填充排列。 在此之后，這些值將發送到 3 個圖表，以便更新您的數據。

出現的問題是只有最后一個圖被更新。 我不知道發生了什么，因為如果我們收到值，似乎其他圖形，但不更新它們。

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

請有人可以幫助我。 在這里，我將代碼留在 StackBlitz 中，看看它是如何工作的。

StackBlitz 中的代碼

Answer 1

我對您的代碼進行了一些操作，似乎在chart.js文件中，您需要將var chartReference移動到主 function 中（所有三個function charts()的 ZC1C425268E68385D1AB5074C17A94F14 更新）。

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

我的猜測是，當您的chartReference之外時，它最終只會引用您的一個圖表。