immutable.js 更新数组（mergeDeepWith）

Posted 2020-10-19 沉冰之雪

使用情境：

　　技术栈为：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。