setState во вложенных массивах в реакции

Question

У меня есть объект состояния React с двумя массивами внутри.

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

Я хочу добавить новые значения в эти массивы после некоторых действий пользователя, но я не нашел правильного пути. До сих пор я пытался что-то вроде этого:

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

Есть идеи, как мне это реализовать?

Answer 1

Это можно сделать двумя простыми способами. Тот, который вы сделали, используя оператор распространения. Как то так,

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

Или вы можете использовать [Object.assign()][1] вот так,

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

Answer 2

Я бы порекомендовал что-то вроде этого

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

когда вы устанавливаете свой штат, вам не нужно использовать ключевое слово this внутри setState function

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

Вы также можете помещать объекты в массив узлов

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