0

在我跳入主题之前,我想提一下,我已经提到过这样的问题,但我自己无法找到解决方案。

将 React 状态更新为二维数组?

假设这是我的状态对象

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

显然,我得到一个错误,说我不应该直接改变状态。那么,如何在没有直接突变的情况下达到相同的效果。我试着玩了一下,但无法弄清楚。

4

2 回答 2

1

由于这一行而出现错误

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
    }
});
于 2020-01-10T09:59:32.870 回答
1

尝试这个

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

像这样使用

this.setState({
  ...this.state,
  graphData: [...this.state.graphData, {x:1,y:1}]
})
于 2020-01-10T09:44:03.257 回答