在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
})
總結:
| 方案 | 適用範圍 | 缺點
| :-: | :-: | :-: |
| 方案一 |多層級和單一層級都存在 | 寫法麻煩,單次對象賦值,對象層級多的時候,容易遺漏
| 方案二 |只適用與第一層級 | 只適用第一層級
| 方案三 |多層級和單一層級都存在 | 若存在深層及和單一層級的,需要多次賦值