如何在 React 中更新带有 N 个对象的二维数组的状态？

Question

在进入主题之前，我想说明一下，我已经提到过类似的问题，但我自己想不出解决方案。

假设这是我的状态对象

state = {
    graphData: [
        [{x: 0, y: 0}],
    ],
};

随着时间的增加，graphData 会变大，看起来像这样

    graphData: [
        [{x: 0, y: 0}, {x: 1, y:1}, {x:2, y:2}],
    ],

目前，我是这样处理的：

  nextGraphData = this.state.graphData[0][graphDataLength] = {x: lastXAxisValue + 1, y: value};

    this.setState({
        graphData: {
            ...this.state.graphData,
            nextGraphData
        }
    });

显然，我收到一条错误消息，提示我不应直接改变状态。那么，如何在不直接突变的情况下实现相同的效果。我试着玩了一下，但没弄明白。

Answer 1

试试这个

state = {
    graphData: [
        [{x: 0, y: 0}],
    ],
};

这样使用

this.setState({
  ...this.state,
  graphData: [...this.state.graphData, {x:1,y:1}]
})

Answer 2

因为这一行出现错误

nextGraphData = this.state.graphData[0][graphDataLength] = {x: lastXAxisValue + 1, y: value};

因为您正试图将值直接分配给 state.graphData

你要做的就是这样改：

让 nextGraphData = {...this.state.graphData,{x: lastXAxisValue + 1, y: value}};

this.setState({
    graphData: {
        ...nextGraphData
    }
});

如何在 React 中更新带有 N 个对象的二维数组的状态？

How to update state of 2D array with N objects inside in React?

javascript

arrays

reactjs

react-vis