这是我在封装方法时遇到的问题,场景情况也比较特殊,可能不适用于大多数场景,仅记录一下嗷
因为需求的原因,我封装了两个方法,一个是树结构转数组,另一个是数组转树结构。在这里这两个方法就不都写出来了
树结构转数组
interface transitionType {
id: number;
name: string;
parentId: number | null;
children?: transitionType[];
}
const arrayToTree = (data: transitionType[]): transitionType[] => {
const arr: transitionType[] = [];
const expanded = (datas: transitionType[]): transitionType[] => {
datas.forEach((e, index) => {
if (e.children) {
datas.push(...e.children);
delete e.children;
}
arr.push(e);
delete datas[index];
});
if (datas.join('').length == 0) {
return arr;
}
return expanded(datas);
};
return expanded(data);
};
遇到的问题是 输出的是一个空数组(数组转树结构输出的是一个长度无限的数组)
这是html的结构(爆红是因为有特殊字母删掉了,有些不能展示...见谅)
原因分析:
1.首先通过 reactive 定义的一个响应式 testArrayToTree 变量(当修改这个变量的时候,在 html 模版中使用到这个变量地方都会重新执行一次)
2.这个变量是一个引用数据类型,当一个引用数据类型通过函数的形参传递进去,并在内部对其进行修改的时候,外部的变量也会修改(引用数据类型是按地址传递)
3.在当前 arrayToTree 方法中,使用forEact对传入数组进行遍历处理(forEach会改变原数组)
最终就导致了,当调用第一次 ArrayToTree 方法处理 textArrayToTree 就会修改 textArrayToTree 本身,Vue 监测到响应式数据被修改后,重新执行调用过该数据的位置,然后又执行了一次 ArrayToTree 方法,一直执行,直到数组为空......
解决的方法:
我是通过对传入的参数进行深拷贝来解决这个问题的,这样forEach操作的数组就不再是传入的那个参数了,或者也可以使用 map ,当然我没有这么写过,大家如果想尝试一下也可以试一试。