嵌套数组中的setState反应

Question

我有一个 React 状态对象，里面有两个数组。

this.state = {
  data2: {
    nodes: [{id: 'input'}],
    links: []
  },
};

我想在一些用户操作后向这些数组添加新值，但我还没有找到正确的方法。到目前为止，我已经尝试过这样的事情：

this.setState([...this.state.data2, {nodes: [...this.state.nodes,{ id: 'input2'}]}]);

关于我应该如何实施这个的任何想法？

Answer 1

我会推荐这样的东西

this.state = { 
    data2: {
    nodes: [],
    links: []
  },
};

设置状态时，您不必在 setState function

中使用 this 关键字

this.setState({ data2:{ nodes: [{id:'input1'},{id:'input2'}]} })

您也可以将对象推送到节点数组中

let temp = data2
temp.nodes.push({id:'input3'})
this.setState({ data2:temp })

Answer 2

可以通过两种简单的方式完成。您使用扩展运算符所做的一个。像这样，

this.setState({data2: {...this.state.data2, nodes: [{id: "input1"}]} });

或者你可以这样使用[Object.assign()][1]，

this.setState({data2: Object.assign({}, this.state.data2, nodes: [{id: "input1"}])});

setState in nested arrays in react