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

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,
      },
    });

1. 您可以在对象（Object.assign()）上使用本机分配功能

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

1. 或为最短的版本和原子更新：

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

1. 还有一个选项是更新插件：

        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},
      })
    });

我建议使用第一个。