使用不变性助手更新 React 状态的数组对象答案

【问题标题】：Updating the array object in React state using immutability helper使用不变性助手更新 React 状态的数组对象
【发布时间】：2016-10-27 05:39:35
【问题描述】：

我正在使用 immutability helper 更新处于 React 状态的数组中的对象。

我要修改的对象是嵌套的：

this.state = {
  a: {
    b: [{ c: '', d: ''}, ...]
  }
}

我想使用不变性助手更新 b 的第 n 个元素中的 prop c。

没有不变性助手的等效代码是：

const newState = Object.assign({}, this.state);
newState.a = Object.assign({}, newState.a);
newState.a.b = newState.a.b.slice();
newState.a.b[n] = Object.assign({}, newState.a.b[n]);
newState.a.b[n].c = 'new value';
this.setState({ newState });

我知道上面的代码有点难看。我假设使用不变性助手的代码将解决我的问题。谢谢

【问题讨论】：

考虑使用 ImmutableJS。

标签： javascript reactjs immutability

【解决方案1】：

一种方法是使用$set

let index = 0;
let newState = update(this.state, {
   a: {
     b: {
      [index]: {
               c: { $set: "new value"}
       }
    }
  }
});
this.setState(newState);

jsfiddle

【讨论】：

更新是否返回一个新的对象/元素，如 abc = Object.assign({}, xyz) 或者它改变了作为参数给出的对象？？
@VrajSolanki 对于这个例子，它将返回新的状态对象，带有新的a 对象（其余键相同，旧引用），其中包含新的b 数组，所有元素引用不会改变，但[index] 一个。对于 c 的新引用，其余的将是旧引用。
@VrajSolanki $set 命令将“完全替换目标”。 $merge 命令会将object 的键与目标合并。 github.com/kolodny/immutability-helper#available-commands
不要忘记从 immutability-helper 导入“更新”。从 'immutability-helper' 导入更新；

【解决方案2】：

我在这里从不变性助手导入update :)

this.state = {
  a: {
    b: [{ c: '', d: ''}, ...]
  }
} 


this.setState((prevState, props) => update(prevState, {
    a: {
        b: {
            $apply: b => b.map((item, ii) => {
                if(ii !== n) return item;
                return {
                    ...item,
                    c: 'new value'
                }
            })
        }
    }
}))

【讨论】：