ネストの深いオブジェクトの表示はされるのですが、undefinedの注意が出てしまいます。

Question

loginUser.user_profile.last_nameなど3つネストしているオブジェクトでは以下のエラーが出てしまいます。
原因が分かる方いらしゃいましたら、教えていただきたいです。

[Vue warn]: Error in render: "TypeError: Cannot read property 'last_name' of undefined"
...
TypeError: Cannot read property 'last_name' of undefined
...

コンポーネント

<template>
  <div class="user-edit">
    <h2>プロフィール編集</h2>
    {{ loginUser.email }}
    {{ loginUser.user_profile }}
    {{ loginUser.user_profile.last_name }}
  </div>
</template>

<script>
import {mapState} from 'vuex'

    export default {
      computed: {
        ...mapState({
          loginUser: state => state.loginUser.loginUser
        })
      },
      mounted() {
        this.$store.dispatch('loginUser/getLoginUser');
      }
    }
</script>

vuexを使っていて、getLoginUserというactionでaxiosを使ってAPIでデータを取ってきています。

よろしくお願いいたします。

補足
(1)...last_name以外の文字列は想定通りに表示されていますか？
last_name以外の文字列も問題なく表示はされますがwarnが出ます。

(2)また、データ取得時に、想定通りにデータが取得できているかをデバッガ等で確認はされましたか？その値はどうだったでしょうか？
vueのデバッガでは以下のように値は入っていました。なのでundefinedにはならないはずなのですが読み込みタイミングなきがしています。

loginUser:Object
loginUser:Object
email:"[e-mail]"
id:8
name:"yamada"
user_profile:Object
birth_date:null
created_at:null
first_name:"太郎"
gender_id:null

last_name:"山田"
updated_at:"2018-10-26 02:31:29"
user_id:8

Comments

[退会済みユーザー]

次の二点について確認し、追記があるとよいかと >> (1)...last_name以外の文字列は想定通りに表示されていますか？(2)また、データ取得時に、想定通りにデータが取得できているかをデバッガ等で確認はされましたか？その値はどうだったでしょうか？

[kuriya]

回答させていただきました。よろしくお願いいたします。

[退会済みユーザー]

user_profileのないuserを読み込んだとかないですか？(参考: https://stackoverflow.com/questions/51454199/vue-warn-error-in-render-typeerror-cannot-read-property-paid-of-null)

[退会済みユーザー]

あと、ほかの文字列でも出ているwarnがきになります

[kuriya]

user_profileのあるuserを読み込んでいます。

[退会済みユーザー]

ごめんなさい、そうですよね。リストを受け取っているわけではなさそうですし。

Answer 1

dispatchでデータをセットする前にtemplateで呼び出そうとしていたので、undefinedになっていたっぽいです。beforeCreateのタイミングなどでdispatchしてもだめでした。
vuexのstateにdefaultの値をセットしておくことでエラーを回避することができました。

Answer 2

loginUser.user_profileは正しく表示されていますか？
TypeError: Cannot read property 'last_name' of undefinedというエラーは
undefinedなオブジェクトにlast_nameというものはないですよというエラーになり、
last_nameを指定しているloginUser.user_profileがundefinedである可能性があります。

Comments

[kuriya]

`loginUser.user_profile`は

```
{ "user_id": 8, "first_name": "太郎", "last_name": "山田", "birth_date": null, "created_at": null, "updated_at": "2018-10-26 02:31:29" }
```
のようなオブジェクトが表示されます。なのでundefinedでは無いです。

[dice142]

誤字でもなさそうですし、HTMLの描画タイミングですかね。
`loginUser.user_profile`が設定された後でHTMLが描画されているか確認されたほうが良いと思います。

[kuriya]

https://jp.vuejs.org/v2/guide/instance.html
現状mountedとなっている箇所をupdatedやcreatedなど全てのライフサイクル？を試したのですが、だめでした。
`loginUser.user_profile`が設定された後でHTMLが描画されているかの確認はどのように行えば良いでしょうか？

[dice142]

vue.jsによるデバッグ経験がほぼほぼないのでできるかは不明ですが、
loginUser.user_profileを設定した箇所にブレークポイントを設定し、
動きを確かめてみると良いかもしれません。
この時に、既に同様のエラーが出てるなら描画後ということになりますし、
エラーが出ていないなら別な原因になります。

[kuriya]

dispatchでデータをセットする前にtemplateで呼び出そうとしていたので、undefinedになっていたっぽいです。beforeCreateのタイミングなどでdispatchしてもだめでした。
vuexのstateにdefaultの値をセットしておくことでエラーを回避することができました。
`dice142`さん,`ppn`さん有難うございました。