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