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

How do I setState for nested object?

提问by Dan G Nelson

For a plugin I'm using I have to have a state that looks like this:

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

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

How would I set the state of hospital_id without setting the rest of access?

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

This seems to remove everything but hospital_id:

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

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

回答by Brigand

You have a few options:

您有几个选择：

1. With ECMA6, you can use the Object spread proposal (...) to create copies of objects with updated properties.

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

2. You can use the native assign function on the Object (Object.assign())

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

3. Or for the shortest version and atomic update:

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

4. And one more option is the updates addon:

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

1. 使用 ECMA6，您可以使用对象传播提议 ( ...) 创建具有更新属性的对象副本。

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

2. 您可以在 Object ( 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},
     })
   });
   

I would recommend using the first one.

我建议使用第一个。

回答by J. Mark Stevens

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

回答by Dan G Nelson

My preferred way of doing this now is as simple as:

我现在首选的方法很简单：

let newAccess = this.state.access;
newAccess.hospital_id = 1;
setState({access: newAccess});

Slightly simpler than the current accepted answer.

比当前接受的答案稍微简单。

EDIT(based on the question from @SILENT )

编辑（基于来自@SILENT 的问题）

It looks like this is actually a potentially dangerous method. Further reading here React: A (very brief) talk about immutability.

看起来这实际上是一种具有潜在危险的方法。在此处进一步阅读React：关于不变性的（非常简短的）讨论。

Looks like a better way to do this would be:

看起来更好的方法是：

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

回答by twocents

Another way to do this would be

另一种方法是

const newAccess = {...this.state.access};
newAccess.hospital_id = 1;
setState({access: newAccess});

Use of the spread operatorcreates a clone of this.state.access.

使用扩展运算符创建this.state.access.