TypeError: Невозможно назначить свойство только для чтения ... - Редактирование наборов данных response-chart js -2 с помощью Redux

Question

Я новичок в React & Redux, так что извините, если есть простое решение этой проблемы - в настоящее время я не могу его найти.

Я использую react-chartjs-2 с Redux для создания некоторых диаграмм с динамическими c данными на основе <input> s. Ядро кода диаграммы можно сократить до:

slice.js:

export const flywheelSlice = createSlice({
  name: "flywheel",
  initialState: {
    windupTime: Qty(0, "s"),
    windupTimeChart: {
      options: {},
      data: [],
    },
  },
  reducers: {
    // . . .
    generateWindupTimeChartReducer: (state, action) => {
      // . . .
      const data = [];
      const getTime = (ratio) => {
        // return some data
      };

      for (let i = start; i < end; i += step) {
        const time = getTime(i);
        if (time.scalar !== 0) {
          data.push({
            x: i,
            y: time.scalar,
          });
        }
      }

      state.windupTimeChart.data = _.orderBy(data, ["x"]);
      state.windupTimeChart.options = makeLineOptions(
        "Ratio vs Windup Time",
        "Ratio",
        "Windup Time"
      );
    },
  },
});

Flywheel.js:

  const chart = useRef(null);
  const windupTimeChart = useSelector((s) => s.flywheel.windupTimeChart);
  return (
        // . . .
        <Line
            data={{
              datasets: [
                {
                  data: windupTimeChart.data,
                  cubicInterpolationMode: "monotone",
                  fill: false,
                  borderColor: styles.primary,
                },
              ],
            }}
            options={windupTimeChart.options}
            ref={chart}
          />
   );

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

Трассировку стека можно найти здесь:

TypeError: Cannot assign to read only property 'length' of object '[object Array]'
    at Array.splice (<anonymous>)
    at http://localhost:3000/static/js/1.chunk.js:91796:22
    at Array.map (<anonymous>)
    at ChartComponent.updateChart (http://localhost:3000/static/js/1.chunk.js:91790:60)
    at ChartComponent.componentDidUpdate (http://localhost:3000/static/js/1.chunk.js:91661:10)
    at commitLifeCycles (http://localhost:3000/static/js/1.chunk.js:112255:26)
    at commitLayoutEffects (http://localhost:3000/static/js/1.chunk.js:115207:11)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/1.chunk.js:92737:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/1.chunk.js:92786:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/1.chunk.js:92839:35)
    at commitRootImpl (http://localhost:3000/static/js/1.chunk.js:114949:13)
    at unstable_runWithPriority (http://localhost:3000/static/js/1.chunk.js:127010:16)
    at runWithPriority$1 (http://localhost:3000/static/js/1.chunk.js:103624:14)
    at commitRoot (http://localhost:3000/static/js/1.chunk.js:114791:7)
    at finishSyncRender (http://localhost:3000/static/js/1.chunk.js:114208:7)
    at performSyncWorkOnRoot (http://localhost:3000/static/js/1.chunk.js:114194:11)
    at http://localhost:3000/static/js/1.chunk.js:103678:28
    at unstable_runWithPriority (http://localhost:3000/static/js/1.chunk.js:127010:16)
    at runWithPriority$1 (http://localhost:3000/static/js/1.chunk.js:103624:14)
    at flushSyncCallbackQueueImpl (http://localhost:3000/static/js/1.chunk.js:103673:11)
    at flushSyncCallbackQueue (http://localhost:3000/static/js/1.chunk.js:103661:7)
    at flushPassiveEffectsImpl (http://localhost:3000/static/js/1.chunk.js:115283:7)
    at unstable_runWithPriority (http://localhost:3000/static/js/1.chunk.js:127010:16)
    at runWithPriority$1 (http://localhost:3000/static/js/1.chunk.js:103624:14)
    at flushPassiveEffects (http://localhost:3000/static/js/1.chunk.js:115224:16)
    at http://localhost:3000/static/js/1.chunk.js:115103:15
    at workLoop (http://localhost:3000/static/js/1.chunk.js:126954:38)
    at flushWork (http://localhost:3000/static/js/1.chunk.js:126910:20)
    at MessagePort.performWorkUntilDeadline (http://localhost:3000/static/js/1.chunk.js:126514:31)

, которое встречается здесь: https://github.com/jerairrest/react-chartjs-2/blob/master/src/index.js#L213

Я не хотел сразу создавать проблему в react-chartjs-2 на случай, если есть обходной путь, который я я пропал.

Answer 1

Я знаю, что уже немного поздно, но я смог понять это. Я использовал Recoil js, и у меня возникала та же проблема при попытке обновить массив данных из глобального управления состоянием. Мое решение заключалось в том, чтобы создать копию из части состояния, которую я обновлял, и просто передать ее данным.

Примерно так:

  const [dataPoints, setDataPoints] = useRecoilState(dataPointFetch);


  const dataPointsArrayCopy = [...dataPoints]
  const chartData = {
    labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    datasets: [
      {
        label: `Jobs applied this day`,
        data: dataPointsArrayCopy,
        borderColor: ["rgba(16, 142, 233,0.8)"],
        pointBackgroundColor: "rgba(16, 142, 233,0.8)",
        fill: false,
        borderWidth: 4
      }
    ]
  };