修改react中this.State

由于需要对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 的更新会被合并

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值