HarmonyOS鸿蒙Next中快应用如何避免读取undefined变量的属性时导致的报错

HarmonyOS鸿蒙Next中快应用如何避免读取undefined变量的属性时导致的报错

现象描述

在JS开发过程中，经常出现一种错误：即读取一个值为null或者undefined变量的属性时，出现错误提示。例如hello.ux中有如下错误代码：

<!-- a = {}; -->
<text>{{ a.b.c }}</text>
<!-- Error: Cannot read property 'c' of undefined -->

解决方法

可以通过如下两种方案进行处理：

【方案一】

使用&&，通过逻辑运算的执行顺序来规避错误。修改的代码如下：

<text>{{ a && a.b && a.b.c }}</text>

【方案二】

推荐使用此方案。在ViewModel上增加函数方法，例如增加一个checkEmpty的函数，示例代码如下：

export default {
  checkEmpty(...args) {
    let ret
    if (args.length > 0) {
      ret = args.shift()
      let tmp
      while (ret && args.length > 0) {
        tmp = args.shift()
        ret = ret[tmp]
      }
    }
    return ret || false
  }
}

这样在获取属性的地方就可以方便的调用此方法，修改后代码如下：

<text>{{checkEmpty(a, 'b', 'c')}}</text>

hello.ux代码：

<template>
  <!-- Only one root node is allowed in template. -->
  <div class="container">
    <text>{{ checkEmpty(a, "b", "c") }}</text>
  </div>
</template>
<style>
.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.body {
  font-size: 35px;
}
</style>
<script>
module.exports = {
  data: {
    componentData: {},
    url: ''
  },
  checkEmpty(...args) {
    let ret
    if (args.length > 0) {
      ret = args.shift()
      let tmp
      while (ret && args.length > 0) {
        tmp = args.shift()
        ret = ret[tmp]
      }
    }
    return ret || false
  }
}
</script>