开发中bug记录--表单提交处理深拷贝和浅拷贝

147 阅读1分钟

问题: 表单提交数据存在数据转换问题,即不想改变双向绑定得值,又要修改成后端需要得参数, 如:时间组件传给后端得格式,单选框选中true/false,后端接收0/1得问题,所以提交得时候我们一般会拷贝一份数据进行处理

ts开发中循环key相等赋值常常写的非常的难类型各种错误。就用了Object.assign来进行数组得拷贝,利用方法特性:越靠后的对象相同key会覆盖前一个对象key进行值修改,对需要处理得数据进行拷贝

image.png

产生得问题时点击提交时候原本得勾选变成了不勾选,数据没有进行真正得拷贝。

image.png

原因分析:

查阅资料Object.assign只进行第一层深拷贝,后面得进行浅拷贝,但是这里TemkeyPermission得值不是第二层对象,不应该会有问题,出现这个问题得原因时第一个参数数目标参数,返回值也是目标对象,所以这么写会对第一个参数进行修改,所以导致了原本的值引用也跟着变化。(实际就是压根没有进行数据拷贝)

解决:

image.png

总结:

1、使用Object.assign进行拷贝得时候第一个参数使用{}空对象

2、可以使用es6解构拷贝如下图(IDEA自动给我转换得,我本来想结构没办法进行改值操作,是我es6没学好)

image.png