uni-app unicloud-db 经常无法正常渲染数据

uni-app unicloud-db 经常无法正常渲染数据

产品分类：

uniCloud/App

操作步骤：

<unicloud-db v-slot:default="{data, loading, hasMore, error}"  
             ref="udb"  
             :where="where"  
             collection="uni-id-users"  
             loadtime="onready"  
             field="_id,username,mobile,role">  

  <u-cell-group title="用户列表">  
    <u-cell-item v-for="(item,index) in data"  
                 :key="item._id"  
                 :title="item.username"  
                 :label="item.mobile"  
                 :arrow="false">  
      <u-button v-if="!!item.role.length" @click="onChangeRole(item,index)" type="error" size="mini">禁用</u-button>  
      <u-button v-else type="success" @click="onChangeRole(item,index)" size="mini">通过</u-button>  
    </u-cell-item>  
  </u-cell-group>  
</unicloud-db>

<script>  
import mixinPage from '@/common/mixins/mixinPage.js'  

const db = uniCloud.database();  
export default {  
  mixins: [mixinPage],  
  data() {  
    return {  
      tabIndex: 0,  
      where: "",  
      tabList: [{  
        name: '所有',  
        where: "!(role in ['AUDITOR','admin'])"  
      }, {  
        name: '待审核',  
        where: 'size(role) == 0'  
      }, {  
        name: '已审核',  
        where: "role == 'USER'"  
      }]  
    }  
  },  
  onReady() {  
    this.onChangTab()  
  },  
  methods: {  
    onChangTab(index = 0) {  
      this.tabIndex = index  
      this.where = this.tabList[index].where  
    },  
    onChangeRole(item, index) {  

    }  
  }  
}  
</script>

预期结果：

正确渲染不报错

实际结果：

[Vue warn]: Error in onready hook: "TypeError: Cannot read property 'selectAllComponents' of null"

(found in pages/goods/index.vue)(env: Windows,mp,1.05.2111162; lib: 2.21.0)

bug描述：

使用unicloud-db 渲染1个列表, 经常出现不渲染状态 ,根据错误提示预计是 组件内部 使用了$refs, 但由于时机不正确,导致返回null,就无法正确渲染页面, db的请求和返回数据都正常,就是渲染不出来


更多关于uni-app unicloud-db 经常无法正常渲染数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

在manifest内配置对应平台下的scopedSlotsCompiler为augmented试试

更多关于uni-app unicloud-db 经常无法正常渲染数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html


试了一下,好像没有出现了, 但不敢在试了,搞了1天,还是用传统方式吧

回复 sharno: 同样的问题，刚开始用unicloud-db，经常会出现页面数据没加载出来，各种奇怪的报错，unicloud-db只是简化写代码的方式，对开发人员来说。还是用之前的逻辑和思维方式来做吧。别被unicloud-db带偏了

这是一个典型的unicloud-db组件渲染时机问题。错误提示"Cannot read property 'selectAllComponents' of null"表明组件在初始化时引用了尚未准备好的DOM元素。

问题核心在于loadtime="onready"与where条件动态变化的冲突。当onReady生命周期触发时，组件开始加载数据，但此时where条件可能尚未完全初始化或发生变化，导致组件内部引用失效。

解决方案：

  1. 延迟数据加载：将loadtime改为manual，手动控制数据加载时机：
<unicloud-db v-slot:default="{data, loading, hasMore, error}"  
             ref="udb"  
             :where="where"  
             collection="uni-id-users"  
             loadtime="manual"  
             field="_id,username,mobile,role">
  1. 调整加载时机：在onReady中确保条件稳定后再加载数据：
onReady() {
  this.$nextTick(() => {
    this.onChangTab(0)
    setTimeout(() => {
      this.$refs.udb.loadData()
    }, 50)
  })
},
onChangTab(index = 0) {
  this.tabIndex = index
  this.where = this.tabList[index].where
  this.$nextTick(() => {
    this.$refs.udb.loadData()
  })
}
  1. 使用watch监控变化（备选方案）：
watch: {
  where(newVal) {
    if(this.$refs.udb) {
      this.$refs.udb.loadData()
    }
  }
}
  1. 检查where条件格式：确保JQL查询条件格式正确，特别是包含数组操作时：
  • size(role) == 0 应改为 role.length == 0
  • role == 'USER' 应改为 role[0] == 'USER'（如果role是数组）
  1. 简化初始条件：避免在组件初始化时使用复杂条件，可先设为空字符串：
data() {
  return {
    where: ""
  }
}
回到顶部