uni-app unicloud-db组件嵌套时里层db数据loadData()不更新

发布于 1周前 作者 ionicwang 来自 Uni-App

uni-app unicloud-db组件嵌套时里层db数据loadData()不更新

产品分类

uniapp/小程序/微信

项目信息 值
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 10.15
HBuilderX类型 正式
HBuilderX版本号 3.99
第三方开发者工具版本号 1.06
基础库版本号 3.2.4
项目创建方式 HBuilderX

示例代码

<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="options" collection="pay"  
            :where="`pay_date > ${selectDateStart} && pay_date < ${selectDateEnd} && is_remove == 0`" groupby="pay_date"  
            group-field="sum(pay_num) as payDaySum" orderby="pay_date desc">  
    <!-- 循环日期 -->  
    <view class="detail-list" v-for="(item,index) in options" :key="index">  
        <view class="detail-date flex align-center">  
            <uni-dateformat :date="item.pay_date" format="yyyy-MM-dd"></uni-dateformat>  
            <view class="body-padding">(¥{{item.payDaySum / 100}})</view>  
        </view>  
        <view class="day-pay bg-white main-margin-top mian-box-shadow main-border-radius">  
            <unicloud-db ref="udb1" v-slot:default="{data, loading, error, options}" collection="pay, pay-type"  

udb1.value.loadData({  
clear: true})

操作步骤

<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="options" collection="pay"  
            :where="`pay_date > ${selectDateStart} && pay_date < ${selectDateEnd} && is_remove == 0`" groupby="pay_date"  
            group-field="sum(pay_num) as payDaySum" orderby="pay_date desc">  
    <!-- 循环日期 -->  
    <view class="detail-list" v-for="(item,index) in options" :key="index">  
        <view class="detail-date flex align-center">  
            <uni-dateformat :date="item.pay_date" format="yyyy-MM-dd"></uni-dateformat>  
            <view class="body-padding">(¥{{item.payDaySum / 100}})</view>  
        </view>  
        <view class="day-pay bg-white main-margin-top mian-box-shadow main-border-radius">  
            <unicloud-db ref="udb1" v-slot:default="{data, loading, error, options}" collection="pay, pay-type"  

udb1.value.loadData({  
clear: true})

预期结果

  • 重新加载数据

实际结果

  • 没有更新数据

bug描述

【报Bug】unicloud-db组件嵌套，里层db数据loadData()不更新


24 回复

提供下子 db 组件的完整代码，注意：帖子中的代码需要使用 `````` 包裹


已提供

<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="options" collection="pay" :where="`pay_date > ${selectDateStart} && pay_date < ${selectDateEnd} && is_remove == 0`" groupby="pay_date" group-field="sum(pay_num) as payDaySum" orderby="pay_date desc">

<view class="detail-list" v-for="(item,index) in options" :key="index">
<view class="detail-date flex align-center">
<uni-dateformat :date="item.pay_date" format="yyyy-MM-dd"></uni-dateformat>
<view class="body-padding">(¥{{item.payDaySum / 100}})</view>
</view>
<view class="day-pay bg-white main-margin-top mian-box-shadow main-border-radius">
<unicloud-db ref="udb1" v-slot:default="{data, loading, error, options}" collection="pay, pay-type" :where="`pay_date == ${item.pay_date} && openid == '${userInfo.openid}' && is_remove == 0`" orderby="pay_date">

<view class="day-pay-detail flex justify-between main-padding-top-down body-padding main-border-bottom" v-for="(item1,index) in data" :key="index">
<text>{{item1.pay_type[0].type_name}}</text><text>¥{{item1.pay_num / 100}}</text>
</view>

</unicloud-db>

            </view>  
        </view>  
        <!-- 循环日期结束 -->  
    </unicloud-db>
<script setup> onShow(() => { udb.value.loadData({ clear: true }) udb1.value.loadData({ clear: true }) }) </script>

组件的默认属性 loadtime 为自动加载数据，加载过程中再次调用 loadData 会被忽略，应设为手动模式，然后在调用 loadData <unicloud-db loadtime="manual"> 文档 https://doc.dcloud.net.cn/uniCloud/unicloud-db.html#props

请教下onShow和onReady里边都取不到udb和udb1是什么原因， udb1 is not defined

外层udb可以获取到 但是里层udb1获取不到

设置为手动模式也不行

回复 冬天的太阳: 是通过ref获取的吗？哪个平台？还是所有平台都不行？

回复 DCloud_uni-ad_HDX: 是通过ref获取的，H5 小程序都不行

回复 DCloud_uni-ad_HDX: 里层db组件的where依赖外层循环的数据。

回复 DCloud_uni-ad_HDX: 里层db组件where条件依赖外层数据，当外层loadData后，里层也不会更新

在页面 oonShow 时，父unicloud-db 还在加载数据，子 <unicloud-db loadtime="manual"> 还没有被创建，是无法获取到的，因为v-for 还没有执行

可以简化这个逻辑，在 父的 v-for 中 使用 v-if 创建子 <unicloud-db v-if="data">，且开启自动加载数据

父 loadtime=“manual” 子 loadtime=“auto”。onReady和onShow中udb.value.loadData({clear:true}),，添加数据后返回页面，父组件数据可以正常更新，但是子组件数据没有更新。（父子组件都loadtime=“auto”，父子数据都不更新）

请问是什么情况

大佬 希望解答一下，谢谢

回复 冬天的太阳: 子组件更新需要满足一定条件,unicloud-db 组件绑定的属性发生变化时才会重新加载数据

如果添加一条时间2024-1-5 买衣服 10元的数据，添加数据后返回页面，这条数据不会更新在页面上。 如果添加一条2024-1-3 买鞋 10元的数据，添加后返回页面就能在页面显示出来。请问这是udb组件在嵌套中有什么bug吗

<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="pay" :where="`pay_date > ${selectDateStart} && pay_date < ${selectDateEnd} && openid == '${userInfo.openid}' && is_remove == 0`" groupby="pay_date" group-field="sum(pay_num) as payDaySum" orderby="pay_date desc" loadtime="manual">

<view class="detail-list" v-for="(item,index) in data" :key="index">
<view class="detail-date flex align-center">
<uni-dateformat :date="item.pay_date" format="yyyy-MM-dd"></uni-dateformat>
<view class="body-padding">(¥{{item.payDaySum / 100}})</view>
</view>
<view class="day-pay bg-white main-margin-top mian-box-shadow main-border-radius">
<unicloud-db v-if="data" v-slot:default="{data, loading, error, options}" collection="pay, pay-type" :where="`pay_date == ${item.pay_date} && openid == '${userInfo.openid}' && is_remove == 0`" orderby="pay_date" loadtime="auto">

<view class="day-pay-detail flex justify-between main-padding-top-down body-padding main-border-bottom" v-for="(item1,index) in data" :key="index">
<text>{{item1.pay_type[0].type_name}}</text><text>¥{{item1.pay_num / 100}}</text>
</view>

</unicloud-db>
</view>
</view>

</unicloud-db>

重新梳理下流程：

子组件需要在页面创建后才能调用 loadData 方法，例如: 写了 v-if 因为父没有数据导致子没有被创建
可以在父的 @load 事件中手动调用 子 <unicloud-db> 的 loadData 方法加载数据

在父的 @load 事件中手动调用 子 <unicloud-db> 的 loadData 方法加载数据，获取不到子组件的值，无法调用loadData方法

代码和实际运行结果已贴出

<unicloud-db ref=“udb” v-slot:default="{data, loading, error, options}" collection=“pay”
:where="pay_date > ${selectDateStart} && pay_date < ${selectDateEnd} && is_remove == 0" groupby=“pay_date”
group-field=“sum(pay_num) as payDaySum” orderby=“pay_date desc” loadtime=“manual” @load=“udbLoad”>

<view class="detail-list" v-for="(item,index) in data" :key="index">
<view class="detail-date flex align-center">
<uni-dateformat :date="item.pay_date" format="yyyy-MM-dd"></uni-dateformat>
<view class="body-padding">(¥{{item.payDaySum / 1000}})</view>
</view>
<view class="day-pay bg-white main-margin-top mian-box-shadow main-border-radius">
<unicloud-db ref="udb1" v-if="data.length > 0" v-slot:default="{data, loading, error, options}" collection="pay, pay-type" :where="`pay_date == ${item.pay_date} && openid == '${userInfo.openid}' && is_remove == 0`" orderby="pay_date" loadtime="manual">

<view class="day-pay-detail flex justify-between main-padding-top-down body-padding main-border-bottom" v-for="(item1,index) in data" :key="index">
<text>{{item1.pay_type[0].type_name}}</text><text>¥{{item1.pay_num / 1000}}</text>
</view>

</unicloud-db>

            </view>  
        </view>  
        <!-- 循环日期结束 -->  
    </unicloud-db>

// 重新加载数据
function udbloadData() {
udb.value.loadData({
clear: true
})
udbSum.value.loadData({
clear: true
})
udbLoad()
}

function udbLoad() {  
    console.log(udb1)  
    udb1.value.loadData({  
        clear: true  
    })  
}

onReady(() => {
udbloadData()
})

onShow(() => {  
    udbloadData()  
})<br><img src="https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/answer/20240112/a227835c9266f6a5c1ddddc8d32f5bf2.png" class="img-polaroid" alt=""><br>

在 UniApp 中使用 uniCloud-db 组件时，如果遇到嵌套的 uniCloud-db 组件里层数据不更新的问题，可能是由于以下原因导致的。以下是一些可能的原因及解决方法：

1. loadData() 方法未正确触发

  • 确保你在外层或里层的 uniCloud-db 组件中正确调用了 this.$refs.xxx.loadData() 方法。
  • 检查 loadData() 方法是否被正确绑定到事件（如点击事件、数据更新事件等）。

示例代码：

<template>
  <view>
    <uni-cloud-db ref="outerDb" ...></uni-cloud-db>
    <button @click="refreshData">刷新数据</button>
  </view>
</template>

<script>
export default {
  methods: {
    refreshData() {
      this.$refs.outerDb.loadData(); // 确保调用正确
    }
  }
}
</script>

2. uniCloud-db 组件的 ref 未正确绑定

  • 确保嵌套的 uniCloud-db 组件中，ref 属性正确绑定。
  • 如果嵌套层级较深，确保通过 this.$refs.outerDb.$refs.innerDb 的方式访问里层组件的 loadData() 方法。

示例代码：

<template>
  <view>
    <uni-cloud-db ref="outerDb">
      <uni-cloud-db ref="innerDb"></uni-cloud-db>
    </uni-cloud-db>
    <button @click="refreshInnerData">刷新里层数据</button>
  </view>
</template>

<script>
export default {
  methods: {
    refreshInnerData() {
      this.$refs.outerDb.$refs.innerDb.loadData(); // 确保访问正确
    }
  }
}
</script>

3. where 条件未更新

  • 如果里层 uniCloud-db 组件的 where 条件依赖于外层数据，确保外层数据更新后，里层的 where 条件也同步更新。
  • 可以使用 watch 监听外层数据的变化，然后手动调用 loadData()。

示例代码：

<template>
  <view>
    <uni-cloud-db ref="outerDb" v-slot:default="{data}">
      <uni-cloud-db ref="innerDb" :where="innerWhere"></uni-cloud-db>
    </uni-cloud-db>
  </view>
</template>

<script>
export default {
  data() {
    return {
      outerData: null,
      innerWhere: {}
    };
  },
  watch: {
    outerData(newVal) {
      this.innerWhere = { parentId: newVal._id }; // 更新 where 条件
      this.$refs.innerDb.loadData(); // 手动刷新里层数据
    }
  }
}
</script>

4. 数据缓存问题

  • uniCloud-db 组件默认会缓存数据，如果数据未更新，可能是缓存导致的。
  • 可以在 loadData() 方法中传入 { clear: true } 参数，强制清除缓存并重新加载数据。

示例代码：

this.$refs.innerDb.loadData({ clear: true });

5. 网络或云函数问题

  • 确保网络连接正常，且云函数能够正确返回数据。
  • 检查云函数的日志，确保没有报错。

6. 组件生命周期问题

  • 如果 loadData() 在组件未完全加载时调用，可能会导致数据无法更新。
  • 确保在组件的 mounted 或 onReady 生命周期中调用 loadData()。

示例代码：

export default {
  mounted() {
    this.$refs.innerDb.loadData();
  }
}
回到顶部
AI 助手
你好，我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验！