javascript - 如何为嵌套对象设置状态？

Question

对于我正在使用的插件，我必须有一个如下所示的状态:

getInitialState() {
  return {
    invalid: true,
    access: {
      access_code: '',
      zipcode: '',
      password: '',
      confirm: '',
      hospital_id: '',
    },
  }
},

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

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

this.setState({access: {hospital_id: 1}})

Answer 1

您有几个选择:

1. 借助 ECMA6，您可以使用对象扩展提案 (...) 创建具有更新属性的对象副本。

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

2. 您可以在对象上使用 native 分配函数 (Object.assign())

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

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

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

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

   var update = require('react-addons-update');
   // per React docs 
   // https://reactjs.org/docs/update.html 
   // , you may want to change this to 
   // import update from 'immutability-helper';
   this.setState({
     access: update(this.state.access, {
       hospital_id: {$set: 1},
     })
   });
   

我建议使用第一个。