Lodash merge踩坑记录

问题描述

低代码平台中有这么个组件传参数的逻辑：需要把交互上游的组件参数传给下游组件处理。

代码如下：

this.paramInteraction = merge({}, this.paramInteraction, data );

本意使用上游组件的data与下游组件原来的param参数做合并，相同的字段由data覆盖param.

然后数据是这么个情况：

// param
{
    arr: [1,2,3,4,5],
    other: xxx
}
// data
{
    arr: [1],
    other: xxxx
}

结果其他参数都能正常合并，就这个arr一直被合成[1,2,3,4,5]（预期是合并成[1]）。然后又是低代码平台，一直以为是哪里配置出问题了，磨磨唧唧了半天才发现是merge的坑。

问题处理

然后就看了merge这个方法递归合并，对于数组或者对象都不是像assign一样后者覆盖前者，是会做数据合并。所以参数值一直都是[1,2,3,4,5].

那这需要如何处理呢：

使用mergeWith

this.paramInteraction = mergeWith({}, this.paramInteraction, data, mergeWithArray);

function mergeWithArray(objValue, srcValue) {
    if (Array.isArray(objValue)) {
        return srcValue;
    }
}

mergeWith可以传入一个合并方法，当要覆盖的值是数组时，就直接覆盖，否则就按正常流程合并。之后问题解决。