reactjs - TypeError: Cannot assign to read only property ... - 使用 Redux 编辑 react-chartjs-2 数据集

Question

我是 React & Redux 的新手，如果有一个简单的解决方案，请原谅 - 我目前找不到。

我正在使用react-chartjs-2Redux创建一些基于<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，以防万一我缺少解决方法。

标签： reactjsreduxreact-reduxchart.jsreact-chartjs

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