ReactJS setState 具有多个嵌套数组

Question

考虑以下结构:

this.state = {
  States: [{
    Abbreviation: "MA",
    Cities: [{
      ID: 1,
      Name: "Boston",
      PropertyToUpdate: null
    },
    {
      ID: 2,
      Name: "Springfield",
      PropertyToUpdate: null
    }]
  }]
}

给定城市 ID 和值，我需要将 PropertyToUpdate 属性更新为该值。所以我会有一个看起来像这样的函数:

handleUpdateProperty(cityID, newValue){
  // Do some things
  this.setState({...});
}

我已经阅读了一些关于 immutable helpers 的文章但我不知道如何处理两层嵌套。我认为它应该看起来像:

var newState = React.addons.update(
  this.state.States[indexOfState].Cities[indexOfCity],
  {PropertyToUpdate: {$set: newValue}}
);

...但这不是正确的语法。那么如何保持我的状态不可变，但仍然更新数组项的嵌套属性？

Answer 1

你会这样使用它

var newState = React.addons.update(this.state, {
  States: {
    [indexOfState]: {
      Cities: {
        [indexOfCity]: {
          PropertyToUpdate: {
            $set: newValue
          }
        }
      }
    }
  }
})

参见nested collections .