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如何更改對象”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。