浅拷贝导致的bug

news2024/12/28 4:06:21

错误代码:

//初始化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 里面的值

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1467369.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

计算机毕业设计 基于SpringBoot的宠物商城网站系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍:✌从事软件开发10年之余,专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ 🍅文末获取源码联系🍅 👇🏻 精…

FreeRtos Queue(三)

本篇主要分析向队列中发送消息 xQueueGenericSend 这个函数。 大致分为两个逻辑: 1、当队列没满的时候的处理 2、当队列没满的时候的处理 主意:整个xQueueGenericSend是在for(;;)中处理的 一、队列没满的case 队列的数据结构图可参考:F…

村镇医院医疗中心污废水如何处理达标

污废水处理是村镇医院医疗中心运营中不可忽视的重要环节。如何有效处理污废水,使其达到相关标准,是保障医疗中心环境卫生的关键之一。 首先,村镇医院医疗中心应建立科学的废水处理系统。该系统应包括预处理、初级处理、中级处理和高级处理等环…

浅析SpringBoot框架常见未授权访问漏洞

文章目录 前言Swagger未授权访问RESTful API 设计风格swagger-ui 未授权访问swagger 接口批量探测 Springboot Actuator未授权访问数据利用未授权访问防御手段漏洞自动化检测工具 CVE-2022-22947 RCE漏洞原理分析与复现漏洞自动化利用工具 其他常见未授权访问Druid未授权访问漏…

全面解析企业财务报表系列之五:阅读财报结构、顺序、模块与不同侧重

全面解析企业财务报表系列之五:阅读财报结构、顺序、模块与不同侧重 一、明确本次报表分析的目的二、确定报表分析的重点项目三、重点分析项目之间的联系四、资产负债表的阅读五、利润表的阅读六、现金流量表的阅读七、综合分析 一、明确本次报表分析的目的 报表的…

自定义悬浮气泡组件

一.常用悬浮气泡展示 在一个项目中,常常会使用点悬浮展示,而市面上悬浮tooltip的组件非常多 例如常用的antd提供的Tooltip 用法如下(来自于官方文档示例): import React from react; import { Button, Tooltip, Con…

开源软件:塑造软件行业未来的协作与创新之力

随着信息技术的迅猛发展,开源软件已经逐渐成为软件开发的潮流,以其独特的低成本、可协作性和透明度等特性,在全球范围内引起了广泛的关注和应用。越来越多的企业和个人选择使用开源软件,这不仅推动了软件行业的繁荣,还…

c编译器学习07:minilisp编译器改造(debug模式支持调试)

问题 原版的minilisp编译器不支持argv输入测试,不方便单步调试。 代码改造目标是既不改变原有程序的各种功能, 又能支持个人习惯的vs单步debug模式。 CMakeLists.txt变更 定义DEBUG宏 解决单步调试源码定位偏差问题 cmake_minimum_required(VERSION …

【Linux Kernel】虚拟文件系统初探

学无止境~ 看LKD进行的粗浅整理,目标是能够做到设计上面的理解~ Linux操作系统上支持多种文件系统,如本地文件系统EXT4、XFS、EXT3 等,同时还支持NFS、CIFS以及一些特殊的文件系统,同时在上层调用文件管理时又不感知不同文件系…

零样本带解释性的医学大模型

带解释性的医学大模型 提出背景解法拆解方法的原因对比以前解法 零样本带解释性的医学大模型如何使用CLIP模型和ChatGPT来进行零样本医学图像分类用特定提示查询ChatGPT所生成的医学视觉特征描述相似性得分在不同症状上的可视化,用于解释模型的预测注意力图的可视化…

高级FPGA开发之PCIe IP Core(三)

高级FPGA开发之PCIe IP Core(三) 一、PCIe IP核简介 通过阅读PCIe spec文档,可以看到UltraScale器件Integrated Block For PCI Express解决方案IP核是具备高带宽、高可缩放性和高可靠串行互联的解决方案,适用于UltraScale器件。赛灵思在 UltraScale 架…

Android 相机启动流程笔记

和你一起终身学习,这里是程序员Android 经典好文推荐,通过阅读本文,您将收获以下知识点: 一、Camera 框架介绍: Camera的框架分为Kernel部分和hal部分,其中kernel部分主要有两块: image sensor driver&…

并发锁机制之深入理解synchronized

并发锁机制之深入理解synchronized Synchronized基础知识 i的JVM字节码指令 getstatic i // 获取静态变量i的值 iconst_1 // 将int常量1压入操作数栈 iadd // 自增 i–的JVM字节码指令 getstatic i // 获取静态变量i的值 iconst_1 // 将int常量1压入操作数栈 isub // 自减…

性能优化——canvas 加载海量图

背景 公司的在线设计稿平台的画板列表页开发时由于数据量不足,未能测出关于画板列表页性能问题,在经过用户一段时间的使用后出现了关于初始化卡顿、缩放卡顿等问题,画板列表页采用了vue-konva 原因 关于画板列表为何卡顿有如下几点原因 1、…

2月24日(周六)比赛前瞻:曼联 VS 富勒姆、拜仁 VS 莱比锡

大家好,博主将持续更新胜负14场前瞻,此处每日赛事间歇更新,胃信号每日更新。 精选赛事:曼联 VS 富勒姆 曼联近期状态显著提升,上一轮联赛客场2-1战胜卢顿,连续7场正赛取得6胜1平的成绩,保持不败…

6.网络游戏逆向分析与漏洞攻防-游戏网络架构逆向分析-通过逆向分析确定游戏明文发送数据过程

内容参考于:易道云信息技术研究院VIP课 上一个内容:测试需求与需求拆解 在开始之前要了解一个小知识,在逆向开始之前要很清楚知道要找的东西是什么,大概长什么样子,只有这样才能看到它第一眼发现它,现在我…

Qt+VTK鼠标拾取点生成拉伸闭合三维体

程序示例精选 QtVTK鼠标拾取点生成拉伸闭合三维体 如需安装运行环境或远程调试,见文章底部个人QQ名片,由专业技术人员远程协助! 前言 这篇博客针对《QtVTK鼠标拾取点生成拉伸闭合三维体》编写代码,代码整洁,规则&…

ES6内置对象 - Map

Map(Map对象保存键值对,键值均不限制类型) 特点: 有序(Set集合是无序的);键值对(键可以是任意类型);键名不能重复(如果重复,则覆盖&…

从ViT到MAE,transformer架构改造Autoencoder

Vision Transformer (ViT) 论文出处[2010.11929] An Image is Worth 16x16 Words: Transformers for Image Recognition at Scale (arxiv.org) 传统的卷积神经网络(CNN)在图像分类、目标检测等任务上表现出色,但其局限性也逐渐显露&#xf…

【大数据】Flink 内存管理(二):JobManager 内存分配(含实际计算案例)

Flink 内存管理(二):JobManager 内存分配 1.分配 Total Process Size2.分配 Total Flink Size3.单独分配 Heap Size4.分配 Total Process Size 和 Heap Size5.分配 Total Flink Size 和 Heap Size JobManager 是 Flink 集群的控制元素。它由三…