uni-app 同一个页面使用两次同一个自定义组件第一个组件会被影响

uni-app 同一个页面使用两次同一个自定义组件第一个组件会被影响

项目信息 详情
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win7
HBuilderX类型 正式
HBuilderX版本号 2.9.8
第三方开发者工具版本号 1.03
基础库版本号 2.14.0
项目创建方式 HBuilderX

示例代码：

<view class="" style="">  
<view class="" style="margin-left: 30rpx;margin-top: 30rpx; display: flex;align-items: center;color: #CCCCCC;font-size: 24rpx;">
<image src="../../../../static/images/install-remark.png" mode="" style="width: 26rpx; height: 26rpx;margin-right: 6rpx;"></image>
<view class="">
自检照片
</view>
</view>  
<choose-photo :showImgList="showImgList" @click="toShow" :delUrl="delCheckReportPhotoUrl" uploadUrl="updateCheckReportPhotoUrl" :uploadData="{checkReportId:install.id,type:'1'}"></choose-photo>
</view>
<view class="" style="background-color: #F5F7FA;height: 20rpx;"></view>
<view class="">
<view class="" style="margin-left: 30rpx;margin-top: 30rpx; display: flex;align-items: center;color: #CCCCCC;font-size: 24rpx;">
<image src="../../../../static/images/install-remark.png" mode="" style="width: 26rpx; height: 26rpx;margin-right: 6rpx;"></image>
<view class="">
第三方检测照片
</view>
</view>
<choose-photo :showImgList="otherShowImgList" @click="toShow" :delUrl="delCheckReportPhotoUrl" uploadUrl="updateCheckReportPhotoUrl" :uploadData="{checkReportId:install.id,type:'2'}"></choose-photo>
</view>

操作步骤：

同一个页面使用两次同一个自定义组件第一个组件会被影响

预期结果：

同一个页面使用两次同一个自定义组件,不会互相影响

实际结果：

同一个页面使用两次同一个自定义组件第一个组件会被影响

bug描述：

同一个页面使用两次同一个自定义组件第一个组件会被影响。我写的是照片上传组件,页面使用两次组件，第一个组件参数会被替换


更多关于uni-app 同一个页面使用两次同一个自定义组件第一个组件会被影响的实战教程也可以访问 https://www.itying.com/category-93-b0.html

15 回复

遇到相同的bug，插个眼

更多关于uni-app 同一个页面使用两次同一个自定义组件第一个组件会被影响的实战教程也可以访问 https://www.itying.com/category-93-b0.html


难搞啊 官方都不回复 也不修复

同样遇到

研究了一下，发现我这边出现数据干扰是应为切换时上一个组件没有卸载就切换了，可以在组件外层加个if判断，切换时做个延时让上一个组件卸载就可以了

延时多少啊? 可以把代码发上来看看吗?

回复 1***@qq.com: 使用ref直接清除组件数据后再赋值

回复 t***@163.com: 不错,我之前是直接复制出来弄成2个组件

我也遇到了，在iphone XR上的头条小程序中，这个问题是必现的。跪求官方早日解决。

2022年了，这个问题还存在，官方还不解决。自定义组件，同一个页面内引入两次，其中一个组件就会被影响，坑啊

ref传值是否可以解决

这都2023年了，还没有修复

具体情况，具体写一下，几年过去了，底层架构都换了。问题应该也不是同一个了。

回复 DCloud_UNI_GSQ: 遇到相同的问题 希望快点修复

遇到了相同的问题，希望有解决办法，渲染时组件内容会错位，点击事件也有异常

<view class="list_back"> <iconTag1 name="建议与bug" icon="iconyijianfankui" @clickEvent="submitBug"></iconTag1> </view> <view class="list_back"> <iconTag2 name="投诉举报" icon="icontousujianyi" @clickEvent="toReport"></iconTag2> </view>

import iconTag1 from ‘@/components/iconTag/iconTag.vue’
import iconTag2 from ‘@/components/iconTag/iconTag.vue’
components:{
iconTag1,
iconTag2,
}

这个问题是由于自定义组件内部状态共享导致的。在uni-app中，当同一个组件被多次使用时，如果组件内部使用了共享的data或变量，可能会导致状态互相影响。

解决方法：

  1. 确保组件内部所有数据都定义在data()函数中，而不是直接使用外部变量或静态变量

  2. 检查组件props是否被正确使用，避免直接修改props的值

  3. 在组件内部使用computed属性来处理props数据，而不是直接引用

  4. 检查组件内部是否有使用全局变量或静态变量

对于你的照片上传组件，建议检查以下几点：

  1. 确保showImgList在组件内部是通过props接收的，而不是直接引用外部变量

  2. 组件内部处理图片列表时，应该使用局部data而不是直接修改props

  3. 上传相关的回调函数应该使用独立的作用域

示例修正：

// 组件内部
props: {
  showImgList: {
    type: Array,
    default: () => []
  }
},
data() {
  return {
    localImgList: [...this.showImgList] // 使用局部变量存储
  }
}
回到顶部