immutable.js 更新數組(mergeDeepWith)
阿新 • • 發佈:2017-12-26
pos ids 改變 如果 post imm orm return bubuko
使用情境:
技術棧為:react + redux + antd (reducer中處理數據使用了immutable.js).
問題:如下圖,做一個搜索功能,form表單每改變一次,都會調用一個update函數將更新的數據合並進去。在下圖中,標簽傳遞的值為{ label: ["1", "2", "3"] },在增加一個標簽會傳{ label: ["1", "2", "3","n"] },這是沒有問題的,但是在減少到兩個標簽的時候傳的值應該是{ label: ["1", "2"] },但是卻會傳{ label: ["1", "2", "3","n"] }。也就是說假如兩個數組A和B,我應該每次傳B,結果卻傳了AUB。
解決:在reducer中處理純函數
1 function _updateDocumentCenterListConditions(state, cdt) { 2 //取出state更新前代表label標簽的數組 3 let label_ids = state.getIn([‘conditionsSearch‘, ‘label_ids‘]); 4 //如果不為bull的話將其轉化為js賦值給label_ids_tojs 5 let label_ids_tojs = label_ids && label_ids.toJS(); 6 //判斷更新後的state中是否選中了標簽 7 if(cdt && cdt.toJS().label_ids && cdt.toJS().label_ids.length > 0){ 8 //如果更新前的state有值,並且它的數組長度大於更新後的state標簽的數組長度 9 if(label_ids_tojs && (label_ids_tojs.length > cdt.toJS().label_ids.length)) { 10 //將原來state中的標簽值置為null 11state = state.setIn([‘conditionsSearch‘, ‘label_ids‘],null) 12 } 13 } 14 return state.mergeDeepWith((prev, next) => next === undefined ? prev : next, { conditionsSearch: cdt }); 15 }
這樣的話再使用mergeDeepWith就不會出現AUB的情況了,因為如果A的長度大於B的長度的話,就會將A的長度置為null。
immutable.js 更新數組(mergeDeepWith)