react怎麼更改物件

react更改物件屬性的方法：1、在state中定義一個物件；2、給obj物件動態增加name和age兩個屬性並初始化賦值；3、使用「Object.assign()」方法來更改整個物件即可。

本教學操作環境：Windows10系統、react18.0.0版、Dell G3電腦。

react怎麼更改物件？

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怎麼更改物件的詳細內容，更多請關注TW511.COM其它相關文章！