javascript - 在 React 中，更新嵌套数组状态项的正确方法是什么

Question

当使用 React(没有 Redux)时。假设我的组件状态如下所示:

{
    rows: [
    {
      items:[
         {
           value:'a',
           errors: false
         },
         {
           value:'b',
           errors: false
         },
         {
           value:'c',
           errors: false
         }
     ]
  }

同时假设行和项目的长度可以是 0 > n。

什么是更新任何项目的值(value)的最佳(最有效、最常见、一致、流行等)方式，即

this.state.rows[0].item[1]

我意识到我能做到:

let updatedRows = this.state.rows
updatedRows[0].item[1].value = 'new value'

this.setState({
  rows: updatedRows
})

这是普遍接受的做法吗？替换几乎整个状态对象来更改单个值不是很低效吗？

Answer 1

let updatedRows = this.state.rows
updatedRows[0].item[1].value = 'new value'

因为 item[1] 是一个对象，更改它的 value 会改变你的状态，因为它指的是同一个对象。

你不应该直接改变状态，因为当你直接修改状态时，React 不会触发相关的生命周期事件。来自文档(https://facebook.github.io/react/docs/react-component.html):

Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

我喜欢使用 immutability-helper库来复制状态中的对象。例如，将 this.state.rows[0].item[1] 的 value 更改为 z:

this.setState({rows: update(this.state.rows, 
        { 0: { item: { 1: { value: { $set: 'z' } } } } }
    )});