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

Question

使用 React 时（没有 Redux）。假设我有如下所示的组件状态：

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

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

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

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）：

切勿直接改变 this.state，因为之后调用 setState() 可能会替换您所做的改变。将 this.state 视为不可变的。

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

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