渲染错误：“TypeError：无法读取未定义的属性‘first_name’”答案

【问题标题】：Error in render: "TypeError: Cannot read property 'first_name' of undefined"渲染错误：“TypeError：无法读取未定义的属性‘first_name’”
【发布时间】：2021-07-20 05:05:29
【问题描述】：

我正在使用 VueJS / Axios 做一个小项目。我的控制台日志中出现错误：

Error in render: "TypeError: Cannot read property 'first_name' of undefined"

因为我得到并正确显示了 first_name（我在我的页面中看到了结果），所以问题就在控制台中

这是我的代码：

export default {
    data(){
        return {
            collection:{
                data: []
            }
        }
    },
    created: function(){
        getAPI.get('/api/contacts/1/', [{'x':'10'}]).then((response) => {
            this.collection.data = response.data
        })
    }
}

HTML 代码：

<span class="d-block info-content">
    {{collection.data.contactInfos.first_name}}
</span>

顺便说一下，我在我的 HTML 中看到了名称，但我只是想知道我的控制台日志错误，因为代码可以完美运行

【问题讨论】：

该错误表明collection.data 中没有contactInfos 属性。检查属性的拼写和大小写。
顺便说一下，我在我的 html 中看到了结果（这意味着拼写是正确的）
这可能来自其他地方。或者错误可能来自其他代码。
发生这种情况是因为数据加载是异步的，只需在模板中使用可选链接 {{collection.data?.contactInfos?.first_name}}

标签： javascript vue.js

【解决方案1】：

您可以尝试加载数据，当它还没有时，使用条件渲染：

<span class="d-block info-content" v-if="collection.data && collection.data.contactInfos">
    {{collection.data.contactInfos.first_name}}
</span>

More information

更新

如果collection.data 是一个数组，则尝试显示第一个元素的contactInfos：

{{collection.data[0].contactInfos.first_name}}

【讨论】：

是的，你没事/但条件不会改变任何事情
您可以将您的response.data 添加到问题中吗？

【解决方案2】：

为了解释发生了什么，created() 钩子不会阻塞。因此，您的页面的渲染会继续进行，直到您的 <span> 元素被渲染。此时，注入{{collection.data.contactInfos.first_name}} 被评估，并且您的控制台记录给定的错误，正如它所暗示的，在渲染Error in render: 期间发生。

稍后，在created()钩子中的Promise解析并更新data后，Vue引擎重新渲染依赖于data的组件，并更新<span>内部的文本节点.

为避免此类问题，您必须确保在加载完成之前不要引用属性。您可以通过在元素上设置 if 条件来做到这一点，例如：

<span class="d-block info-content" v-if="!loadingData">
    {{collection.data.contactInfos.first_name}}
</span>

只有在承诺解决后才更新loadingData：

export default {
    data(){
        return {
            collection:{
                data: []
            },
            loadingData: true
        }
    },
    created: function(){
        getAPI.get('/api/contacts/1/', [{'x':'10'}]).then((response) => {
            this.collection.data = response.data
            this.loadingData = false
        })
    }
}

【讨论】：

我应该使用 Created 还是 Mounted，通常情况下？
@AliceMunin 是的，created()。在created钩子中调用API（一般是异步数据加载）其实是推荐的做法

【解决方案3】：

你可以试试三元条件，先去掉这个错误，像这样

{{collection.data.contactInfos ? collection.data.contactInfos.first_name : ""}}

然后试着找出这个property从那个对象中丢失的地方。

【讨论】：

【解决方案4】：

我相信您的回复将以未解析的 JSON 形式返回。你可以试试：

this.collection.data = JSON.parse(response.data)

【讨论】：