当前位置: 首页 > 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 对视频展现进行无监督学习
  • 首映|《人生开门红》:段子背后都是案子
  • 洛阳原副市长收礼品消费卡,河南通报6起违反八项规定典型问题
  • 持续更新丨伊朗内政部长:港口爆炸已致14人死亡
  • 持续更新丨伊朗内政部长:港口爆炸已致8人死亡750人受伤
  • 日均新开三家“首店”,上海的“首发经济”密码是什么?
  • 对话|男篮国手杨瀚森:参加NBA选秀,去更大的舞台追梦