上一篇博文写了对象的深拷贝,这些天在工作中,正好遇到了出在同样身为”引用类型”,数组身上的问题。
先说下需求:
通过UE图看出需求,表格中的每一行是通过点击添加按钮,动态添加到表格中的;并且在每一行中会有很多需要填入配置项的输入框;
技术:react
问题:根据数据驱动原理,这个表格的生成依靠的是一个数组数据tableList
,这个数组中的每一个元素是一个object
,object
中有个value
属性的值也是数组,这个数组用来生成配置输入框,类似于这样:
const tableList = [{id:1, value:[],type:3},{id:1, value:[],type:3},{id:1, value:[],type:3}...]
问题:tableList中的每一个元素都是表格中的一列,那么如果想增加一列的话,就往tableList中push一个新的object,那么react自动会渲染出新一列表格,这看似没什么问题;但是问题恰恰出现了,当你在第一列的输入框中输入内容的时候,第二列、第三列、第四列…中的输入框都会显示同一内容;
debug:这个问题原因是,当每次往tableList数组中push一个新的对象的时候,这个对象中也含有数组,数组是个引用类型,在追加的时候,只是追加了内存栈中的引用地址,这些引用地址指向了内存堆中的同一数组内容,进而出现使输入框联动的问题;这就需要我们每次往tableList中push对象的时候,让这个对象中的数组是个经过深拷贝的数组,不仅仅是引用地址。
下面就说下数组的深拷贝:
当然方法有很多,我在网上也看到了很多方法,其中for循环是可用的,但是在这里我要介绍一种新的方法,新的思路:
const arr = [1,2,3,4,5];
const deepCloneArr = JSON.parse(JSON.stringify(arr));
将一个数组转换为字符串,因为字符串是基本类型,再把这字符串转为数组,这样就实现了数组的深克隆;