uni-app 使用unicloud-db时 getone为true无法取得属性

uni-app 使用unicloud-db时 getone为true无法取得属性

开发环境 版本号 项目创建方式
Windows 21H2 HBuilderX

操作步骤：

<unicloud-db v-slot:default="{data, loading, error, options}" collection="articles" field="title,content" :getone="true" where="id=='1'">  
  <view>  
    <text>{{ data.title }}</text>  
    <text>{{ data.content }}</text>  
  </view>  
</unicloud-db>

预期结果：

  • 正确的渲染出文章的标题和内容

实际结果：

  • 渲染了标题 title 的值，但是直接在控制台出现错误 TypeError: Cannot read property 'title' of undefined
  • 并且 content 的内容不渲染。

bug描述：

当使用 Vue3 时，使用 <unicloud-db>，并且使用了 getone 时，直接在下面渲染整个变量 data 时，会以 JSON 的形式展现在界面上，但是如果具体访问某个属性，第一次属性会正常显示，但是会在控制台触发一次错误，内容为

TypeError: Cannot read property 'title' of undefined
    at _createBlock.default._withCtx (http://localhost:3000/pages/agrees/privacy.vue?import&t=1652973292311:37:38)
    at Proxy.renderFnWithContext (http://localhost:3000/@fs/D:/devs/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-h5-vue/dist/vue.runtime.esm.js:2060:21)
    at Proxy.<anonymous> (http://localhost:3000/@fs/D:/devs/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-h5/dist/uni-h5.es.js:13560:75)
    at renderComponentRoot (http://localhost:3000/@fs/D:/devs/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-h5-vue/dist/vue.runtime.esm.js:2103:44)
    at ReactiveEffect.componentUpdateFn [as fn] (http://localhost:3000/@fs/D:/devs/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-h5-vue/dist/vue.runtime.esm.js:6447:34)
    at ReactiveEffect.run (http://localhost:3000/@fs/D:/devs/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-h5-vue/dist/vue.runtime.esm.js:187:25)
    at updateComponent (http://localhost:3000/@fs/D:/devs/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-h5-vue/dist/vue.runtime.esm.js:6313:26)
    at processComponent (http://localhost:3000/@fs/D:/devs/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-h5-vue/dist/vue.runtime.esm.js:6246:13)
    at patch (http://localhost:3000/@fs/D:/devs/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-h5-vue/dist/vue.runtime.esm.js:5828:21)
    at patchKeyedChildren (http://localhost:3000/@fs/D:/devs/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-h5-vue/dist/vue.runtime.esm.js:6611:17)

更多关于uni-app 使用unicloud-db时 getone为true无法取得属性的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

应先判断data 是否为 null，然后在取属性，例如 <unicloud-db v-slot:default="{data, loading, error, options}" :getone="true">
<view v-if="data">
<text>{{ data.title }}</text>
<text>{{ data.content }}</text>
</view>
</unicloud-db>

更多关于uni-app 使用unicloud-db时 getone为true无法取得属性的实战教程也可以访问 https://www.itying.com/category-93-b0.html


有效! 终于解决了.

遇到同样的问题，使用getone，渲染data会报undefined，楼主解决了吗？

在使用 uni-app 的 unicloud-db 组件时，如果你设置了 getone 为 true，但无法获取到属性，可能是以下几个原因导致的：

1. 查询结果为空

getone 为 true 时，unicloud-db 组件会尝试获取第一条数据。如果数据库中没有匹配的记录，返回的结果会是 null 或 undefined，因此你无法获取到任何属性。

解决方法：

  • 确保数据库中有符合查询条件的数据。
  • 可以在 unicloud-db 组件的 success 事件中检查返回的数据是否为空。
<template>
  <view>
    <unicloud-db ref="udb" v-slot:default="{data, loading, error}" collection="your-collection" where="your-condition" getone @success="onSuccess">
      <view v-if="loading">Loading...</view>
      <view v-if="error">{{ error.message }}</view>
      <view v-if="data">{{ data.someProperty }}</view>
    </unicloud-db>
  </view>
</template>

<script>
export default {
  methods: {
    onSuccess(result) {
      if (!result) {
        console.log('No data found');
      }
    }
  }
}
</script>

2. 数据绑定问题

如果你在模板中直接访问 data 的属性，但 data 为 null 或 undefined，会导致无法获取到属性。

解决方法：

  • 使用 v-if 或 optional chaining 来确保数据存在后再访问属性。
<template>
  <view>
    <unicloud-db ref="udb" v-slot:default="{data, loading, error}" collection="your-collection" where="your-condition" getone>
      <view v-if="loading">Loading...</view>
      <view v-if="error">{{ error.message }}</view>
      <view v-if="data">{{ data?.someProperty }}</view>
    </unicloud-db>
  </view>
</template>

3. 查询条件不匹配

where 条件可能不正确，导致查询不到数据。

解决方法：

  • 检查 where 条件，确保它能够匹配到数据库中的记录。
<unicloud-db ref="udb" v-slot:default="{data, loading, error}" collection="your-collection" where="field == 'value'" getone>

4. 数据库权限问题

确保你有权限读取数据库中的数据。

解决方法：

  • 检查数据库的权限设置，确保当前用户有读取权限。

5. 数据库连接问题

如果数据库连接有问题，可能导致查询失败。

解决方法：

  • 检查网络连接，确保能够正常访问数据库。

6. 数据格式问题

如果数据库中的数据格式不符合预期，可能导致无法正确解析。

解决方法：

  • 检查数据库中的数据格式，确保它符合预期。

总结

通过以上方法，你应该能够排查出 getone 为 true 时无法获取属性的原因。如果问题依然存在，建议在 unicloud-db 组件的 error 事件中打印错误信息，以便进一步排查问题。

<unicloud-db ref="udb" v-slot:default="{data, loading, error}" collection="your-collection" where="your-condition" getone @error="onError">

methods: {
  onError(error) {
    console.error('Error:', error);
  }
}
回到顶部