1. 程式人生 > >immutable.js 更新數組(mergeDeepWith)

immutable.js 更新數組(mergeDeepWith)

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 11
state = 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)