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

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

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

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

或者是最短的版本和原子更新：

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

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

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

我会使用第一个。

Answer 2

＆＃13;

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

＆＃13;

Answer 3

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

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

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

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

看起来这实际上是一种潜在危险的方法。在这里进一步阅读React: A (very brief) talk about immutability.

看起来更好的方法是：

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

Answer 4

另一种方法是

liveData.observe

使用spread operator会创建const newAccess = {...this.state.access}; newAccess.hospital_id = 1; setState({access: newAccess});的克隆。

Answer 5

我也有同样的问题（不是相同的上下文），我在自己的工作中做了下面的代码，并且效果很好

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

Answer 6

最好的方法是 ES6 ，你可以用扩展对象更新状态（通过这种方式，您可以重新分配“hospital_id”），如下所示：

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

如何为嵌套对象设置setState？

6 个答案: