react如何更改對象

今天小編給大家分享一下react如何更改對象的相關(guān)知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

react更改對象屬性的方法：1、在state中定義一個對象；2、給obj對象動態(tài)增加name和age兩個屬性并初始化賦值；3、使用“Object.assign()”方法來更改整個對象即可。

react setState修改對象屬性

由于需要對state中定義的對象屬性做變更操作，卻發(fā)現(xiàn)setState是不能直接對state中的對象屬性進行操作的。

首先，我們在state中定義一個對象：

this.state = {
obj: {}
}

下一步操作是給obj這個對象動態(tài)的增加name,age兩個屬性并初始化賦值,根據(jù)setState的特性，是可以直接更改obj屬性，所以我們可以新建一個object對象，取名為coverObj，然后給coverObj添加name,age屬性和初始值，這個時候我們得到的obj對象就和coverObj是一樣的啦！如下：

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

按照上面的方式的話，其實就是將coverObj直接覆蓋給obj，如果obj本身就存在其他屬性，那么就會導(dǎo)致其他屬性的丟失。

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的語法是將第一個參數(shù)當(dāng)做目標(biāo)對象，在目標(biāo)對象的基礎(chǔ)上進行操作的，也就是說會改變原來的目標(biāo)對象，所以一般在使用Object.assign的時候會將目標(biāo)設(shè)置為空對象，相當(dāng)于返回一個全新的對象。

接下來，我們把屬性name的值變更為『小紅』，前提是obj中已經(jīng)存在了需要做更改的屬性，且屬性名與變更值的屬性名一致，更改對象中的某個屬性：

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相關(guān)：

Object.assign() 方法用于將所有可枚舉屬性的值從一個或多個源對象分配到目標(biāo)對象。它將返回目標(biāo)對象。

語法：Object.assign(target, ...sources)

關(guān)于 setState() 你應(yīng)該了解三件事：

1、不要直接修改 State，而是應(yīng)該使用 setState():

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

3、State 的更新會被合并

以上就是“react如何更改對象”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。