Почему только одна диаграмма из трех обновляется с помощью response-chartjs-2?

Question

Оказывается, у меня есть модал, который содержит текстовое поле для записи числовых значений. Затем записанное значение передается через цикл, чтобы заполнить соглашение суммой, записанной в текстовом поле. После этого значения отправляются на 3 графика, чтобы ваши данные обновлялись.

Проблема, которая возникает, заключается в том, что обновляется только последний график. Я не знаю, что происходит, потому что кажется, что другие графики, если мы получим значения, но не обновим их.

Я использую material-ui и Reaction-chartjs-2.

Пожалуйста, кто-то, кто может мне помочь. Здесь я оставляю код в StackBlitz, чтобы посмотреть, как он работает.

Код в StackBlitz

Answer 1

Я немного поиграл с вашим кодом, и похоже, что в файле chart.js вам нужно переместить var chartReference в основную функцию (function charts()), чтобы все три обновились.

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

Я предполагаю, что когда ваш chartReference находится за пределами функции, он ссылается только на одну из ваших диаграмм.