当前位置: 首页 > news >正文

浅拷贝导致的bug

错误代码:

//初始化formTableData的值
const formTableData = ref({
  saleOrderTime:'',
  saleOrderDetails:[]
});

const showModal = async (item) => {
  //调接口获取后端返回的数据
  let data = (await api.searchSaleOrderById({saleOrderId:item.id})).data

  console.log("data",data);//此时这里打印的data值是正确的

  formTableData.value = data[0]

  formTableData.value.saleOrderDetails = data
   
  console.log("formTableData.value", formTableData.value);//这里就不对劲了,甚至导致了上述data的值也不对劲
};

saleOrderDetails 数据正常应该是一维数组

现在变成了可以无限展开的多维数组,且影响到了原有 data 的值

正确代码:将值进行深拷贝即可,因为我数据只有一层,所以这里我使用的是展开运算符进行深拷贝

const showModal = async (item) => {
  //调接口获取后端返回的数据
  let data = (await api.searchSaleOrderById({saleOrderId:item.id})).data

  console.log("data",data);

  formTableData.value = {...data[0]} //只需将这里进行深拷贝即可

  formTableData.value.saleOrderDetails = data
   
  console.log("formTableData.value", formTableData.value);
};

现在所有数据就一切正常啦!!!且不会影响到 data 里面的值

相关文章:

  • 【算法与数据结构】1971、LeetCode寻找图中是否存在路径
  • Ubuntu20.04 查看系统版本号
  • go - 学习笔记 - 1
  • 使用logicflow流程图实例
  • ClickHouse快速上手
  • Hyperf 使用配置中心 - nacos配置中心
  • 力扣hot100题解(python版10-12题)
  • Windows如何新建一个需要管理员权限才能删除的文件夹
  • Vue | (四)使用Vue脚手架(上) | 尚硅谷Vue2.0+Vue3.0全套教程
  • IDEA自定义类注释及方法注释模板
  • 智慧城市的新宠儿:会“思考”的井盖
  • 分布式锁的应用场景及实现
  • [晓理紫]每日论文分享(有中文摘要,源码或项目地址)--强化学习、模仿学习、机器人
  • Jmeter 学习目录(0)
  • 《Solidity 简易速速上手小册》第9章:DApp 开发与 Solidity 集成(2024 最新版)
  • Postgresql源码(121)事务状态中childXids的作用
  • 【ArcGIS微课1000例】0105:三维模型转体模型(导入sketchup转多面体为例)
  • 【Spring Boot 3】【JPA】一对一双向关联
  • 【Git工具实战】实用真实 Git 开发工作流程
  • Sora背后的论文(1):使用 lstms 对视频展现进行无监督学习
  • 苏迪曼杯八强战,中国队横扫马来西亚队晋级四强
  • 从“土”到“潮”,唢呐何以“圈粉”年轻人
  • “五一”假期首日:国铁南宁局发送旅客81.7万人次
  • 侧记|“五五购物节”启动!最大力度补贴,买买买 “666”
  • 居委业委居民群策群力,7位一级演员来到上海一小区唱戏
  • 王毅谈金砖国家反恐和网络安全合作