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影片教學》

以上是react怎麼更改對象的詳細內容。更多資訊請關注PHP中文網其他相關文章！