react向state中一个数组的指定下标对象中添加值

Question

比方说state=[
    aaa：[]
]
aaa=[
    {},
    {
    vvv:[
        x:xx
        y:yy
        {1:1},
        {2:2},
        {3:3}
    ]
    },
    {},
    {}
]

我想想aaa下标为1中vvv的数组再添加两个对象{4:4}{5:5},请问如何操作,我只是简单的想往里面添加值

Answer 1

const aaa = this.state.aaa.slice()
aaa[1]['vvv'] = [...aaa[1]['vvv'], {4:4}, {5:5}]
this.setState({ aaa: aaa })

Answer 2

const aaa = [
  {},
  {
    vvv: [{ 1: 1 }, { 2: 2 }, { 3: 3 }],
  },
  {},
  {},
];

this.state.aaa[1] = Object.assign(this.state[1], { 4: 4, 5: 5 });
this.setState({ aaa: this.state.aaa });

直接改就好了，最后要调用setState

Answer 3

参考：https://zh-hans.reactjs.org/d...

永远不要直接改变this.state，因为后续调用的setState()可能会替换掉你的改变。请把this.state看作是不可变的。

1. (最佳实践) 使用 immutable-js 之类的库
2. 参考 change 方法

  class Component {
    state = [
      {},
      {
        vvv: [{1: 1}, {2: 2}, {3: 3}],
      },
      {},
      {},
    ];

    change() {
      this.setState(state => ({
        a: [
          state.a.slice(0, 1),
          {
            // Your code
          },
          state.a.slice(2),
        ],
        ...state,
      }))
    }

  }