在React中使用immutability-helper单次调用更新嵌套state多个值

可以通过immutability-helper的update方法单次调用更新多个嵌套属性，你遇到的问题是JS对象同名键覆盖规则导致的，和库的能力无关。

你给update传入的第二个配置对象中，重复写了两次[element]作为顶层键，JS 中同一个对象内的重复键会被后定义的内容覆盖，所以实际传入库的配置只剩下更新fouls的逻辑，自然只有最后一行规则生效。

正确写法是把同一下标对应的多个更新规则，合并到同一个[element]对应的属性对象内即可，示例如下：

this.state={
    players:[{points: 0, fouls: 0, name: 'bob'}, {points: 0, fouls: 0, name: 'joe'}]
}

const elementIndex = this.state.players.findIndex(el => el.name === 'bob');

let updatedPlayers = update(this.state.players, {
  [elementIndex]: {
    points: {$set: 2 },
    fouls: {$set: 1 }
  }
});

this.setState({ players: updatedPlayers })

如果需要更新不同下标的多个元素，或者不同层级的多个属性，只要按照数据的嵌套结构，把所有更新规则写在同一个配置对象的对应层级下，单次update调用就可以全部生效。

内容的提问来源于stack exchange，提问作者Andreas C