uni-app unicloud-db组件嵌套时获取不到里层的db

uni-app unicloud-db组件嵌套时获取不到里层的db

产品分类：

uniapp/小程序/微信

PC开发环境操作系统：

Mac

PC开发环境操作系统版本号：

10.15

HBuilderX类型：

正式

HBuilderX版本号：

3.99

第三方开发者工具版本号：

最新

基础库版本号：

最新

项目创建方式：

HBuilderX

示例代码：

<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">  
    <!-- 循环日期 -->  
    <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 ref="udb1" v-slot:default="{data, loading, error, options}" collection="pay, pay-type"  
                :where="`pay_date == ${item.pay_date} && openid == '${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 / 100}}</text>  
                </view>  
                <!-- 每日消费明细结束 -->  
            </unicloud-db>  

onReady() {  
    this.$refs.udb.loadData({clear: true})  
    this.$refs.udb1.loadData({clear: true})  

    console.log('udb - ' + this.$refs.udb)  
    console.log(this.$refs.udb1)  
}  

// 报错： TypeError: Cannot convert object to primitive value

操作步骤：

<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">  
    <!-- 循环日期 -->  
    <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 ref="udb1" v-slot:default="{data, loading, error, options}" collection="pay, pay-type"  
                :where="`pay_date == ${item.pay_date} && openid == '${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 / 100}}</text>  
                </view>  
                <!-- 每日消费明细结束 -->  
            </unicloud-db>  

onReady() {  
    this.$refs.udb.loadData({clear: true})  
    this.$refs.udb1.loadData({clear: true})  

    console.log('udb - ' + this.$refs.udb)  
    console.log(this.$refs.udb1)  
}  

// 报错： TypeError: Cannot convert object to primitive

预期结果：

正常更新

实际结果：

里层不能更新

bug描述：

unicloud-db组件嵌套，里层db组件的where依赖外层db组件的data， 里外db组件loadtime=“manual”。 当onReadyloadData的时候，获取不到里层的db组件


更多关于uni-app unicloud-db组件嵌套时获取不到里层的db的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

没人处理这个bug吗

更多关于uni-app unicloud-db组件嵌套时获取不到里层的db的实战教程也可以访问 https://www.itying.com/category-93-b0.html


帖子重复 https://ask.dcloud.net.cn/question/184447

在 uni-app 中使用 unicloud-db 组件时，如果遇到嵌套的 unicloud-db 组件无法获取到里层的数据，可能是由于以下几个原因导致的。以下是一些常见的排查和解决方法：

1. 数据绑定问题

  • 确保你在外层 unicloud-db 组件中正确绑定了数据，并且数据已经成功加载。
  • 如果外层 unicloud-db 组件的数据没有加载完成，里层的 unicloud-db 组件可能无法获取到数据。

解决方法：

  • 在外层 unicloud-db 组件的 [@load](/user/load) 事件中确认数据已经加载完成，然后再进行里层 unicloud-db 组件的操作。
<unicloud-db ref="outerDb" [@load](/user/load)="onOuterLoad">
  <!-- 外层数据 -->
</unicloud-db>

<unicloud-db ref="innerDb" v-if="outerDataLoaded">
  <!-- 里层数据 -->
</unicloud-db>

export default {
  data() {
    return {
      outerDataLoaded: false
    };
  },
  methods: {
    onOuterLoad() {
      this.outerDataLoaded = true;
    }
  }
};

2. 数据依赖问题

  • 里层 unicloud-db 组件的数据可能依赖于外层 unicloud-db 组件的数据。如果外层数据没有正确传递到里层，里层组件可能无法获取到数据。

解决方法：

  • 确保外层数据正确传递到里层组件。可以通过 props 或 v-bind 将外层数据传递给里层组件。
<unicloud-db ref="outerDb" [@load](/user/load)="onOuterLoad">
  <!-- 外层数据 -->
  <unicloud-db ref="innerDb" :where="innerWhere">
    <!-- 里层数据 -->
  </unicloud-db>
</unicloud-db>

export default {
  data() {
    return {
      outerData: [],
      innerWhere: {}
    };
  },
  methods: {
    onOuterLoad(event) {
      this.outerData = event.detail;
      this.innerWhere = { outerId: this.outerData[0].id }; // 假设里层数据依赖于外层的某个字段
    }
  }
};

3. 组件生命周期问题

  • 如果里层 unicloud-db 组件在外层数据加载完成之前就已经渲染，可能会导致里层组件无法获取到数据。

解决方法：

  • 使用 v-if 控制里层组件的渲染时机，确保在外层数据加载完成后再渲染里层组件。
<unicloud-db ref="outerDb" [@load](/user/load)="onOuterLoad">
  <!-- 外层数据 -->
</unicloud-db>

<unicloud-db ref="innerDb" v-if="outerDataLoaded">
  <!-- 里层数据 -->
</unicloud-db>

export default {
  data() {
    return {
      outerDataLoaded: false
    };
  },
  methods: {
    onOuterLoad() {
      this.outerDataLoaded = true;
    }
  }
};

4. 数据查询条件问题

  • 里层 unicloud-db 组件的查询条件可能没有正确设置，导致无法获取到数据。

解决方法：

  • 检查里层 unicloud-db 组件的 where 条件，确保它依赖于外层数据并且条件设置正确。
<unicloud-db ref="outerDb" [@load](/user/load)="onOuterLoad">
  <!-- 外层数据 -->
  <unicloud-db ref="innerDb" :where="innerWhere">
    <!-- 里层数据 -->
  </unicloud-db>
</unicloud-db>

export default {
  data() {
    return {
      outerData: [],
      innerWhere: {}
    };
  },
  methods: {
    onOuterLoad(event) {
      this.outerData = event.detail;
      this.innerWhere = { outerId: this.outerData[0].id }; // 假设里层数据依赖于外层的某个字段
    }
  }
};

5. 组件引用问题

  • 如果通过 ref 引用 unicloud-db 组件，确保引用的方式正确，并且在合适的时机调用组件的方法。

解决方法：

  • 确保在数据加载完成后再通过 ref 调用里层组件的方法。
<unicloud-db ref="outerDb" [@load](/user/load)="onOuterLoad">
  <!-- 外层数据 -->
  <unicloud-db ref="innerDb" :where="innerWhere">
    <!-- 里层数据 -->
  </unicloud-db>
</unicloud-db>

export default {
  methods: {
    onOuterLoad() {
      this.$refs.innerDb.loadData(); // 确保在外层数据加载完成后调用里层组件的加载方法
    }
  }
};

6. 网络请求问题

  • 如果网络请求失败或超时，可能会导致里层 unicloud-db 组件无法获取到数据。

解决方法：

  • 检查网络连接，确保请求能够正常发送和接收。可以在 unicloud-db 组件的 [@error](/user/error) 事件中处理错误情况。
<unicloud-db ref="innerDb" [@error](/user/error)="onInnerError">
  <!-- 里层数据 -->
</unicloud-db>

export default {
  methods: {
    onInnerError(error) {
      console.error('里层数据加载失败:', error);
    }
  }
};
回到顶部