Error in render: “TypeError: Cannot read properties of null (reading ‘0‘)“ 报错解决方案

近期在写项目的时候遇到一个很有趣的问题，当我准备获取一个数组中的子数组到页面时，提示我报错Error in render: “TypeError: Cannot read properties of null (reading ‘0’)”，渲染的时候不能读取，这是怎么回事呢，赶紧搜索一下，发现问题了

这是我原来报错的代码

		<view class="apply-name">
          <text>{{ item.applicant }}</text>
          <text>
            {{ item.inspector[0] }}
          </text>
       	</view>

报错信息

出现报错的原因
我们在调用inspector这个接口的时候，是异步调用，而在vue的渲染机制中，异步数据先显示初始数据（也就是本来就存在的数据），再显示带数据的数据，所以当vue开始执行的时候，inspector 中是没有数据的，所以才会报错。

解决方法

解决方法也很简单，就是在加载该片段的时候添加一个判断语句，v-if=“item.inspector” 如果它为空，就不进行该模块的渲染，更改后代码如下

		<view class="apply-name">
          <text>{{ item.applicant }}</text>
          <text v-if="item.inspector">
            {{ item.inspector[0] }}
          </text>
        </view>

解决是解决了，但是为什么v-if作用就这么厉害呢，是不是很好奇，那我们接着往下看

Vue进行了如下转化template —> ast —> render函数，最后根据生成的render函数来生成相应的DOM，这里就不拓展讲了。在生成ast和render函数的时候，Vue对v-if这一类指令进行了解析。所以在rend（）
进行渲染时，v-if已经开始进行判断了，所以我理解的是，此时insepector中的数据已经被渲染了，所以再次寻找里面的数据的时候就不会报错了。