vue子组件的数据处理后竟然影响了父组件的数据,导致父级的数据也同步变更了的问题解决

文章目录

问题描述

需要在子组件中处理来自父组件的数据,将父级的千分位去掉,转为纯数字:

js 复制代码
const originalData = [
  ["16", "33", "17", "1", "1", "14", "23", "21", "19", "76", "40", "16"],
  ["37,052.50", "2,346.99", "13,004.61", "0", "9,932.42", "33,316.57", "117,774.72", "12,736.32", "18,883.98", "242,959.26", "32,550.61", "6,036"]
];

在通过父级传递给子组件后,用props接收,在子组件中进行处理,最终想要的结果如下:

js 复制代码
const originalData = [
  ["16", "33", "17", "1", "1", "14", "23", "21", "19", "76", "40", "16"],
  ["37052.50", "2346.99", "13004.61", "0", "9932.42", "33316.57", "117774.72", "12736.32", "18883.98", "242959.26", "32550.61", "6036"]
];

子组件的处理代码如下(省略了部分结构代码):

js 复制代码
 props: {
    pdata: {
      type: Array,
      required: true,
      default: () => []
    }
  },

const data = [
  ["16", "33", "17", "1", "1", "14", "23", "21", "19", "76", "40", "16"],
  ["37,052.50", "2,346.99", "13,004.61", "0", "9,932.42", "33,316.57", "117,774.72", "12,736.32", "18,883.98", "242,959.26", "32,550.61", "6,036"]
];
//通过for循环嵌套遍历数组,去除千分位
for (let i = 0; i < data.length; i++) {
  for (let j = 0; j < data[i].length; j++) {
    data[i][j] = data[i][j].replace(/,/g, '');
  }
}

console.log(data);//打印的结果符合我的要求,但是发现父级的千分位也没有了

这种方式是直接改变了原数组的,导致父数据也没有千分位了,即使我深度复制父级数据再处理后,还是有此问题。

js 复制代码
const data=[...this.pdata]
//而且我打印过,data!==pdata,可是还是出现了此问题,也就是父数据也没有千分位了
data = [
  ["16", "33", "17", "1", "1", "14", "23", "21", "19", "76", "40", "16"],
  ["37,052.50", "2,346.99", "13,004.61", "0", "9,932.42", "33,316.57", "117,774.72", "12,736.32", "18,883.98", "242,959.26", "32,550.61", "6,036"]
];

for (let i = 0; i < data.length; i++) {
  for (let j = 0; j < data[i].length; j++) {
    data[i][j] = data[i][j].replace(/,/g, '');
  }
}

console.log(data);// 尽管深度复制了,打印的结果符合我的要求,但是发现父级的千分位也没有了

问题解决

最终,我通过map解决了问题。最终将其改为:

js 复制代码
const ndata = data.map((subArray) => {
       return subArray.map((item) => item.replace(/,/g, ""));
 });
console.log(ndata); //打印的结果符合我的要求,也不影响父级的千分位

我猜测原因可能是上面的扩展运算符只是影响到了第一层,第二层的数据还是原始数据的引用。

另外的问题是,为何在子组件处理的数据会影响到父组件的数据呢?有知道的同学可在下方留言

如果你在web前端开发、面试、前端学习路线有困难可以加我V:imqdcnn。免费答疑,行业深潜多年的技术牛人帮你解决bug。

祝你能成为一名优秀的WEB前端开发工程师!

相关推荐
m0_748247551 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
m0_748255022 小时前
前端常用算法集合
前端·算法
真的很上进2 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203982 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2343 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1233 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~4 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语4 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport4 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg4 小时前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全