uniapp uView 骨架屏导致页面高度报错解决方案?

Question

uniapp使用uView的骨架屏导致页面高度报错问题。
报错信息：TypeError: Cannot read property 'height' of undefined

<template>  <view>    !--引用组件-->    <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>  </view></template><script>  export default {    data(){        return {            loading: true, // 显示骨架屏组件        }    },    onload(){        getSchoolDetailSpecial(this.paramList).then(res=>{          if (res.code == 20000) {              this.loading = false; //关闭骨架屏          }        }).catch(err=>{})    }  }</script>

组件源文件代码片段如下：
打印出res是个空数组，因此找不到res【0】【0】.height

Answer 1

从您提供的信息来看，报错信息“TypeError: Cannot read property 'height' of undefined”表明在尝试访问一个未定义对象的height属性时出现了问题。根据您提供的代码片段和描述，问题可能出在<u-skeleton>组件内部，当getSchoolDetailSpecial(this.paramList)返回的结果为空数组时，组件试图访问res[0][0].height，但res是空数组，因此res[0]是undefined，进而尝试访问undefined的height属性时产生了错误。

为了解决这个问题，您可以在组件内部添加检查以确保res数组不为空，并且res[0]和res[0][0]都存在，然后再尝试访问height属性。以下是您可以考虑的实现方式：

1. 在组件的源代码中找到访问res[0][0].height的部分。
2. 在访问height属性之前，添加检查以确保res、res[0]和res[0][0]都是存在的。

例如：

// 伪代码，具体实现取决于组件的源代码if (res && res.length > 0 && res[0] && res[0].length > 0) {  // 现在可以安全地访问 res[0][0].height  var height = res[0][0].height;  // ... 其他代码} else {  // 处理res为空数组或res[0]为空数组的情况  // 可以设置一个默认值，或者抛出一个错误，或者执行其他适当的操作}

请注意，由于您没有提供<u-skeleton>组件的完整源代码，上述解决方案是一个通用的建议。您可能需要根据组件的实际实现情况进行适当的调整。

此外，为了避免页面加载时出现高度报错的问题，您还可以在<u-skeleton>组件的模板中添加条件渲染，以确保只在res数组中有有效数据时才渲染相关的高度信息。这可以通过使用v-if指令来实现。

<template>  <view>    <u-skeleton v-if="loading && schoolDetail" :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>    <!-- 其他内容 -->  </view></template><script>  export default {    data() {      return {        loading: true,        schoolDetail: null, // 用于存储从学校详细信息的API调用中获取的数据      };    },    onload() {      getSchoolDetailSpecial(this.paramList).then(res => {        if (res.code == 20000) {          this.schoolDetail = res.data; // 假设数据存储在res.data中          this.loading = false;        }      }).catch(err => {});    },  };</script>

在上面的代码中，v-if="loading && schoolDetail"确保了只有当loading为true且schoolDetail存在时，<u-skeleton>组件才会被渲染。这样，当res数组为空时，组件将不会被渲染，从而避免了高度报错的问题。同时，当数据成功加载后，您需要将schoolDetail设置为相应的数据，并将loading设置为false，以正确显示页面内容。