問(wèn)題描述從后臺(tái)拿到的數(shù)據(jù)有很多層,但是通過(guò)this.setState只能賦值到第一層,之前請(qǐng)求過(guò)類似的都不會(huì)出現(xiàn)這種情況.一來(lái)希望大神們能稍微解釋一下,而來(lái)希望有一個(gè)能快速解決的方法。感激不盡...
state = {
listData: {}
}
...
fetchList({
...
})
.then(data => { console.log('data ====>', data); this.setState({
listData: Object.assign({}, data);
}, () => { console.log('listData =====>', this.state.listData);
})
})data深度的值無(wú)法正確復(fù)制給data// console.log 1data =====> {
x1: xxx,
x2: {
x2_1: xxx,
x2_2: xxx,
},
x3: {
x3_1: xxx,
}//...}// console.log 2listData ====> {
x1: xxx,
x2: {},
x3: {},}第二層開(kāi)始的都被過(guò)濾為空 無(wú)法賦值.
2 回答
慕姐8265434
TA貢獻(xiàn)1813條經(jīng)驗(yàn) 獲得超2個(gè)贊
ES6中的Object.assgin()是實(shí)現(xiàn)淺拷貝的。JS深拷貝與淺拷貝，與React沒(méi)關(guān)系的。
我們也在做React項(xiàng)目，給出兩種解決方案吧
1、按樓主的想法，實(shí)現(xiàn)Object深拷貝：
JSON.parse(JSON.stringify(oldObj)); //簡(jiǎn)單粗暴沒(méi)有之一，注意這個(gè)方法會(huì)忽略掉為undefined的屬性，不過(guò)數(shù)據(jù)庫(kù)一般存的是null而非undefined(后臺(tái)一般是不會(huì)幫你把null轉(zhuǎn)成undefined的，吃力不討好~），所以也可能忽略這個(gè)缺點(diǎn)
2、完全沒(méi)必要調(diào)用復(fù)制data，直接調(diào)用setState，React會(huì)幫你處理復(fù)制的^_^
this.setState({ listData: data
})//然后在任意方法中console.log(this.state.listData)
結(jié)束~！
慕森王
TA貢獻(xiàn)1777條經(jīng)驗(yàn) 獲得超3個(gè)贊
可以嘗試一下immutable.js
不管怎樣，深拷貝總會(huì)帶來(lái)性能問(wèn)題，
可以從別的角度來(lái)解決這個(gè)問(wèn)題，比如精簡(jiǎn)數(shù)據(jù)結(jié)構(gòu)
以前只有一個(gè)state，現(xiàn)在拆分為多個(gè)，每次setState只更新其中某一項(xiàng)就行了
添加回答
舉報(bào)
0/150
提交
取消