使用情境：
技术栈为：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。
