React中setState修改深層物件
在React中經常會使用到setState,因為在react生態中,state就是一切.在開發過程中,時長會在state中遇到一些比較複雜的資料結構,類似下面這樣的:
state = {
list: {
objA: {
name: `A`,
age: 20
},
objB: {
name: `B`,
age: 25
},
objC: {
show: false
},
objD: `D`
}
}
這時需要我們修改list
中objA
中的name
屬性和objD
的屬性,遇到這樣的情況我們一般會使用什麼辦法解決呢?其實有三種解決方案:
方案一(作用於物件中的深層級和第一層級):
this.setState({
list: {
...this.state.list,
objA: {
...this.state.list.objA,
name: `A1`
}
}
})
方案二(作用物件中的第一層級):
let data = Object.assign({}, this.state.list, {objD: `D1`})
this.setState({
list: data
})
方案三(作用於物件中的深層級和第一層級):
let data = this.state.list;
data.objA.name = `A1`;
data.objD = `D1`;
this.setState({
list: data
})
總結:
| 方案 | 適用範圍 | 缺點
| :-: | :-: | :-: |
| 方案一 |多層級和單一層級都存在 | 寫法麻煩,單次物件賦值,物件層級多的時候,容易遺漏
| 方案二 |只適用與第一層級 | 只適用第一層級
| 方案三 |多層級和單一層級都存在 | 若存在深層及和單一層級的,需要多次賦值
這三種寫法都可以,使用哪一種方案,還需要根據業務來定.希望看了之後,能給大家帶來一些幫助,謝謝.
相關文章
- JavaScript深層克隆物件JavaScript物件
- 對react中setState的總結React
- 揭密React setStateReact
- React之setStateReact
- React setState和修改props觸發的鉤子React
- vue物件的深層複製Vue物件
- 【React】setState詳解React
- React淺談setStateReact
- React中setState真的是非同步的嗎React非同步
- 關於react中setState的深入理解React
- [譯]理解react之setStateReact
- React-setState雜記React
- 在 React 16 中從 setState 返回 null 的妙用ReactNull
- React 中 setState() 為什麼是非同步的?React非同步
- 從原始碼的角度再看 React JS 中的 setState原始碼ReactJS
- React原始碼閱讀:setStateReact原始碼
- Understanding React `setState` 翻譯React
- React菜鳥入門之setStateReact
- React的setState執行機制React
- React原始碼解讀之setStateReact原始碼
- React 原始碼剖析系列 - 解密 setStateReact原始碼解密
- JavaScript 中物件的深拷貝JavaScript物件
- 基於React 原始碼深入淺出setState:setState非同步實現React原始碼非同步
- React setState合併和批量處理React
- 【React深入】setState的執行機制React
- react 常見setState的原理解析React
- React - setState原始碼分析(小白可讀)React原始碼
- 【React】為什麼我不再使用setState?React
- React從零實現-元件渲染和setStateReact元件
- [譯] React 未來之函式式 setStateReact函式
- React之setState的正確開啟方式React
- [譯]React未來之函式式setStateReact函式
- [React技術內幕] setState的祕密React
- React16——看看setState過程中fiber幹了什麼事情React
- 對React setState的一些思考與心得React
- React-原始碼解析-setState執行機制React原始碼
- React元件的DidMount事件裡的setState事件React元件事件
- 詳解js中物件的深淺拷貝JS物件