如何为嵌套对象设置setState?

Dan*_*son 30 javascript reactjs react-native

对于我正在使用的插件,我必须有一个看起来像这样的状态:

getInitialState() {
  return {
    invalid: true,
    access: {
      access_code: '',
      zipcode: '',
      password: '',
      confirm: '',
      hospital_id: '',
    },
  }
},
Run Code Online (Sandbox Code Playgroud)

如何在不设置其余访问权限的情况下设置hospital_id的状态?

这似乎删除了除hospital_id之外的所有内容:

this.setState({access: {hospital_id: 1}})
Run Code Online (Sandbox Code Playgroud)

Bri*_*and 76

您可以使用Object.assign或对象传播提议来创建具有更新属性的对象的副本.

this.setState({
  access: {
    ...this.state.access,
    hospital_id: 1,
  },
});

this.setState({
  access: Object.assign({}, this.state.access, {
    hospital_id: 1,
  }),
});
Run Code Online (Sandbox Code Playgroud)

或者对于最短版本和原子更新:

this.setState(({access}) => ({access: {
  ...access,
  hospital_id: 1,
}});
Run Code Online (Sandbox Code Playgroud)

还有一个选项是更新插件:

var update = require('react-addons-update');
this.setState({
  access: update(this.state.access, {
    hospital_id: {$set: 1},
  })
});
Run Code Online (Sandbox Code Playgroud)

我会用第一个.

  • 考虑到React使用最新的ES + Babel(大部分),这应该是公认的答案.Object spread操作符是最简洁易用的grep. (4认同)

J. *_*ens 15

let newAccess = Object.assign({}, this.state.access);
newAccess.hospital_id = 1;
this.setState({access: newAccess});
Run Code Online (Sandbox Code Playgroud)

  • [不要直接修改状态](https://facebook.github.io/react/docs/state-and-lifecycle.html#do-not-modify-state-directly) (10认同)
  • 你不应该直接改变国家 (9认同)
  • 使用setState是间接修改状态的建议方法.现在可能是你的意思是让newAccess = Object.assign({},this.state.access); 应该使用以前没有发生的事情.在这种情况下,我可能会同意,因为这是我在其他地方使用的模式. (3认同)