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是一样的啦！如下：

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

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

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

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

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

注释1、2：以上两种方式的返回值是一样的。由于Object.assign的语法是将第一个参数当做目标对象，在目标对象的基础上进行操作的，也就是说会改变原来的目标对象，所以一般在使用Object.assign的时候会将目标设置为空对象，相当于返回一个全新的对象。接下来，我们把属性name的值变更为『小红』，前提是obj中已经存在了需要做更改的属性，且属性名与变更值的属性名一致，更改对象中的某个属性：

letcoverObj={};
coverObj['name']='小明',
coverObj['age']=20,
letdata2=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如何更改对象”这篇文免费云主机、域名章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注云技术行业资讯频道。

相关推荐: vue内置组件怎么使用

这篇文章主要介绍了vue内置组件怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue内置组件怎么使用文章都会有所收获，下面我们一起来看看吧。 vue组件有：1、component，用于渲染一个“元组件”为动态组件。2、tr…