web-dev-qa-db-ja.com

[Vue warn]：レンダリング関数のエラー：「TypeError：nullのプロパティ 'first_name'を読み取れません」

私は以下を持っています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"

奇妙なことに、ユーザーの名が正しく表示されています。何が悪いのですか？

javascriptvue.jsvuex
7
Mateusz Urbański

Vuexストアのuserが最初はnullに設定されているため、このエラーが発生する可能性が高くなります。 Vueコンポーネントにマップされたuserゲッターは、Vuexストアへの初期化が適切にnullを設定する前に、そのuser値を返します。

最初にuserを空のオブジェクト{}に設定できます。このように、Vueコンポーネントのテンプレートのuser.first_nameはundefinedになり、テンプレートには何もレンダリングされません。

または、div要素にv-if="user"属性を追加することもできます。

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

このように、マップされたdivプロパティの値が真になるまで、userとその内容はレンダリングされません。これにより、Vueがuserが適切に設定されるまでuser.first_nameにアクセスしようとしなくなります。

18
thanksd

私にとってうまくいった解決策は、ユーザーをnullではなく空の文字列' 'に設定することでした。

const state = {
    user: ''
}
0
user1925711