react setState修改对象属性

标签：添加   初始化   更新   返回值   应该   java   增加   不能   object   

由于需要对state中定义的对象属性做变更操作，却发现setState是不能直接对state中的对象属性进行操作的。
那我们应该怎么办呢？不要捉急，听我慢慢道来（??压根不想听你废话……）

首先，我们在state中定义一个对象：

this.state = {
	obj: {}
}

下一步操作是给obj这个对象动态的增加name,age两个属性并初始化赋值,根据setState的特性，是可以直接更改obj属性，所以我们可以新建一个object对象，取名为coverObj，然后给coverObj添加name,age属性和初始值，这个时候我们得到的obj对象就和coverObj是一样的啦！如下：

let coverObj = {};
coverObj[‘name’] = ‘小明’,
coverObj[‘age’] = 20,
this.setState({
	obj: coverObj
})

按照上面的方式的话，其实就是将coverObj直接覆盖给obj，如果obj本身就存在其他属性，那么就会导致其他属性的丢失。

this.state = {
	obj: {hobby: ‘游泳’}
}

let coverObj = {};
coverObj[‘name’] = ‘小明’,
coverObj[‘age’] = 20,
this.setState({
	obj: coverObj
})
// 打印出来的obj是没有hobby属性的

因此，我们就需要用到Object.assign()方法来更改整个对象：

let coverObj = {};
coverObj[‘name’] = ‘小明’,
coverObj[‘’age] = 20,
let data2 = Object.assign(this.state.obj, coverObj)   // 1
// let data2 = Object.assign({}，this.state.obj, coverObj)  // 2
this.setState({
	obj: data2
})

注释1、2：以上两种方式的返回值是一样的。由于Object.assign的语法是将第一个参数当做目标对象，在目标对象的基础上进行操作的，也就是说会改变原来的目标对象，所以一般在使用Object.assign的时候会将目标设置为空对象，相当于返回一个全新的对象。

接下来，我们把属性name的值变更为『小红』，前提是obj中已经存在了需要做更改的属性，且属性名与变更值的属性名一致，更改对象中的某个属性：

let coverObj = {};
coverObj[‘name’] = ‘小明’,
coverObj[‘’age] = 20,
let data2 = Object.assign({}，this.state.obj,coverObj, {name: ‘小红’}) 
this.setState({
	obj: data2
})
// 打印的 obj: {hobby: ‘游泳’, name: ‘小红‘, age: 20}

这个时候就达到了我们想要更改对象属性值的目的了。

Object.assign相关：
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。
语法：Object.assign(target, ...sources)
参考文献： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

关于 setState() 你应该了解三件事：
1、不要直接修改 State，而是应该使用 setState():
2、State 的更新可能是异步的
3、State 的更新会被合并

react setState修改对象属性

标签：添加   初始化   更新   返回值   应该   java   增加   不能   object   

原文地址：https://www.cnblogs.com/min77/p/14890161.html