The Error in the render: "TypeError: always read the properties of null '0' (reading)" Error solution

I encountered a very interesting problem when I was writing a project recently. When I was about to get a sub-array in an array to the page, I was prompted with an error Error in render: “TypeError: Cannot read properties of null (reading '0')", it can't be read when rendering, what's going on, hurry up to search and find the problem

This is my original error code

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

Error message

Reason for error
When we call the inspector interface, it is an asynchronous call, and in the rendering mechanism of vue, asynchronous data first displays the initial data (that is, the data that already exists), and then displays the data with data, so when vue starts to execute, there is no data in the inspector, so an error will be reported.

Workaround

The solution is also very simple, that is to add a judgment statement when loading the fragment, v-if="item.inspector" If it is empty, the rendering of the module will not be performed. The modified code is as follows

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

The solution is solved, but why is v-if so powerful? Are you curious? Let's look down.

Vue performs the following transformation template -> ast -> render function, and finally generates the corresponding DOM according to the generated render function, which will not be expanded here.When generating ast and render functions, Vue parses instructions such as v-if.So when render()
is rendering, v-if has already started to judge, so what I understand is that the data in the inspector has been rendered at this time, so it will not report an error when looking for the data in it again..