TypeError: Cannot assign to read only property ... - Editing react-chartjs-2 datasets with Redux

Question

I'm a novice at React & Redux, so excuse me if there is an easy solution to this - I'm not able to find one currently.

I'm utilizing react-chartjs-2 with Redux to create some charts with dynamic data based on <input>s. The core of the chart code can be reduced down to:

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}
          />
   );

I'm finding a very odd issue where updating data for one chart, updating data for another, and then updating data for the first one causes an error with read only data ... but not always.

The stacktrace can be found here:

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)

which occurs here: https://github.com/jerairrest/react-chartjs-2/blob/master/src/index.js#L213

I didn't want to create an issue right away within react-chartjs-2 in case there was a workaround that I am missing.

score 2 · Answer 1 · answered Jun 23 '20 at 12:51

I know it's a little late but I was able to figure it out. I was using Recoil js and it was giving me the same problem when trying to update the data array from global statemanagement. My solution was to create a copy from the piece of state I was updating and just pass that to the data.

Something like this:

  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
      }
    ]
  };

wow. this worked for me thanks! Would have taken a while longer to find this. — maxwell, Jun 07 '21 at 14:08

TypeError: Cannot assign to read only property ... - Editing react-chartjs-2 datasets with Redux

1 Answers1