react如何更改对象

今天小编给大家分享一下react如何更改对象的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

react更改对象属性的方法：1、在state中定义一个对象；2、给obj对象动态增加name和age两个属性并初始化赋值；3、使用“Object.assign()”方法来更改整个对象即可。

react setState修改对象属性

由于需要对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)

关于 setState() 你应该了解三件事：

1、不要直接修改 State，而是应该使用 setState():

2、State 的更新可能是异步的

3、State 的更新会被合并

以上就是“react如何更改对象”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。