javascript - [Vue 警告] : Error in render function: "TypeError: Cannot read property ' first_name' of null"

Question

我有以下 Navigation.vue 组件:

<template>
  <div>
    {{user.first_name}}
  </div>
</template>

<script>
  import { mapActions, mapGetters } from 'vuex'

  export default {
    name: 'hello',
    methods: {
      ...mapActions(['myAccount'])
    },

    mounted: function () {
      if (localStorage.getItem('access_token')) {
        this.myAccount()
      }
    },

    computed: {
      ...mapGetters(['user'])
    }
  }
</script>

此代码返回:

[Vue warn]: Error in render function: "TypeError: Cannot read property 'first_name' of null"

但奇怪的是用户名字显示正确。我做错了什么？

Answer 1

您很可能会收到该错误，因为您的 Vuex 存储中的 user 最初设置为 null。映射到您的 Vue 组件的 user getter 在 Vuex 存储的一些初始化正确设置 user 之前返回 null 值。

您最初可以将 user 设置为一个空对象 {}。这样，您的 Vue 组件模板中的 user.first_name 将是 undefined 并且模板中不会呈现任何内容。

---

或者，您可以将 v-if="user" 属性添加到包含的 div 元素:

<div v-if="user">
  {{ user.first_name }}
</div>

这样，在映射的user 属性的值为真之前，div 及其内容不会被渲染。这将阻止 Vue 在正确设置 user 之前尝试访问 user.first_name。