\[Vue 警告\]：渲染函数出错：“TypeError：无法读取 null 的属性‘first_name’”

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"

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

原文由 Mateusz Urbański 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

---

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

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

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

原文由 thanksd 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对我有用的解决方案是将用户设置为空字符串 ' ' 而不是 null。

 const state = {
    user: ''
}

原文由 user1925711 发布，翻译遵循 CC BY-SA 3.0 许可协议