uniapp调取后台接口，当data为null时，出现的报错和解决方法

出现错误的代码和报错图片

源代码

<view style="display: flex; flex-direction: row; justify-content: center; align-items: center; border-bottom: 4px solid #f0f0f0; height: 100rpx;" @click="toUrl(`/pages/menstore/store/cashOut`)" v-if="mdMy.level != 3">
						<image src="../../../static/tixianzhanghu.png" style="width: 60rpx; height: 60rpx; margin-left: -60rpx;"></image>
						<view style="font-weight: 600; margin-left: 20rpx;">提现账户</view>
					</view>
<script>
	export default {
		data() {
			return {
				mdMy: {
					level: null,
					amountAccount: null,
				},
			};
		},	
		onShow() {
			this.ajax.get(this.jk.mdMy).then(res => {
				this.mdMy = res.data;
			})
		},
		methods: {
			// 跳转页面
			toUrl(url) {
				this.common.UnavigateTo(url)
			},
		}
	};
</script>

接口返回状态：（也是导致报错的原因）

正常的接口返回的状态，在原代码里面就不会出现这样的报错

我这里是做个记录，当后端不返回数据的时候，这里做一些判断不让他出现这种报错

<template>
  <!-- 使用 && 操作符确保 mdMy 不是 null -->
  <view v-if="mdMy && mdMy.level != 3" style="...">
    <!-- ... -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 初始时将 mdMy 设置为 null 或一个有默认属性的对象
      mdMy: null,
    };
  },
  onShow() {
    this.ajax.get(this.jk.mdMy).then(res => {
      if (res.data) {
        this.mdMy = res.data;
      } else {
        // 如果后端返回 null，则设置 mdMy 为一个默认值的对象
        this.mdMy = {
          level: null,
          amountAccount: null,
        };
      }
    });
  },
  // 其他方法...
};
</script>

要解决这个问题，您需要在尝试访问 mdMy.level 之前确保 mdMy 不是 null。如果 mdMy 是 null，则尝试访问其属性会导致错误。以下是修改后的代码示例：

1. 在模板中，添加一个额外的条件来检查 mdMy 是否不是 null。
2. 在获取数据时，确保如果后端返回的 data 是 null，则将 mdMy 设置为一个具有默认值的对象
3. 这样的修改确保了即使 mdMy 一开始是 null 或者后端返回了 null，您的代码也不会尝试访问一个不存在的属性，从而避免了错误。同时，它还处理了后端可能返回空数据的情况，确保应用程序的稳定运行。