質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Q&A

解決済

2回答

1127閲覧

Nuxt.jsビギナーズガイドで発生した、Cannot read property 'id' of nullエラーについて

toshihirokato

総合スコア20

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

1グッド

2クリップ

投稿2019/10/20 22:36

編集2019/10/23 05:35

前提・実現したいこと

Nuxt.jsビギナーズガイドのnuxt-blog-serviceを作成中で、
ユーザー機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

TypeError: Cannot read property 'id' of null

該当のソースコード

Nuxtjs

1<template> 2 <div> 3 <el-row v-if="user"> 4 <el-col :span="6"> 5 <el-card class="text-center" style="margin-right: 16px;"> 6 <div> 7 <img 8 src="https://placehold.it/150x150" 9 style="width: 100%;margin-bottom: 16px;border-radius: 2px;" 10 alt="" 11 /> 12 </div> 13 <h2> 14 </h2> 15 </el-card> 16 </el-col> 17 <el-col :span="18"> 18 <el-card> 19 <div slot="header" class="clearfix"> 20 <span>{{user.id}} さんの投稿</span> 21 </div> 22 <el-table 23 :data="userPosts" 24 style="width: 100%" 25 class="table" 26 > 27 <el-table-column 28 prop="title" 29 label="タイトル" 30 /> 31 <el-table-column 32 prop="created_at" 33 label="投稿日時" 34 width="160" 35 /> 36 </el-table> 37 </el-card> 38 </el-col> 39 </el-row> 40 </div> 41</template> 42 43<script> 44import moment from '~/plugins/moment' 45import { mapGetters } from 'vuex' 46 47export default { 48 async asyncData({ store, route, error }){ 49 const { id } = route.params 50 try { 51 await store.dispatch('users/fetchUser', { id }) 52 } catch(e) { 53 error({ statusCode: 404 }) 54 } 55 }, 56 computed: { 57 userPosts(){ 58 return Object.entries(this.user.posts).map(([id, post]) => { 59 post.created_at = moment(post.created_at).format('YYYY/MM/DD HH:mm:ss') 60 return { id, ...post } 61 }) 62 }, 63 user(){ 64 const user = this.users.find(u => u.id === this.$route.params.id) 65 if (!user) return null 66 return Object.assign({ posts: [] }, user) 67 }, 68 ...mapGetters('users', ['users']) 69 } 70} 71</script> 72

該当のソースコード

indexjs

1import moment from '~/plugins/moment' 2 3export const state = () => ({ 4 isLoggedIn: false, 5 user: null 6}) 7 8export const getters = { 9 isLoggedIn: state => state.isLoggedIn, 10 user: state => 11 (state.user ? Object.assign({ likes: [] }, state.user) :null) 12} 13 14export const mutations = { 15 setUser(state, { user }) { 16 if (user.id.match(/_|@|./)) { 17 throw new TypeError('invalid username') 18 } 19 state.user = user 20 state.isLoggedIn = true 21 }, 22 updateUser(state, { user }) { 23 state.user = user 24 } 25} 26 27export const actions = { 28 async login({ commit }, { id }) { 29 if (id.match(/_|@|./)) { 30 throw new TypeError('invalid username') 31 } 32 const user = await this.$axios.$get(`/users/${id}.json`) 33 console.log(user) 34 if (!user.id) throw new Error('Invalid user') 35 commit('setUser', { user }) 36 }, 37 async register({ commit }, { id }) { 38 const payload = {} 39 payload[id] = { id } 40 await this.$axios.$patch(`/users.json`, payload) 41 const user = await this.$axios.$get(`/users/${id}.json`) 42 if (!user.id) throw new Error('Invalid user') 43 commit('setUser', { user }) 44 }, 45 async addLikeLogToUser({ commit }, { user, post }) { 46 user.likes.push({ 47 created_at: moment().format(), 48 user_id: user.id, 49 post_id: post.id 50 }) 51 const newUser = await this.$axios.$put(`/users/${user.id}.json`, user) 52 commit('updateUser', { user: newUser }) 53 }, 54 async removeLikeLogToUser({ commit }, { user, post }) { 55 user.likes = post.likes.filter(like => like.user_id !== user.id) || [] 56 const newUser = await this.$axios.$put(`/users/${user.id}.json`, user) 57 commit('updateUser', { user: newUser }) 58 } 59} 60

###該当のソースコード

postsjs

1import moment from '~/plugins/moment' 2 3export const state = () => ({ 4 posts: [] 5}) 6 7export const getters = { 8 posts: state => 9 state.posts.map(post => Object.assign({ likes: [] }, post)) 10} 11 12export const mutations = { 13 addPost(state, { post }) { 14 state.posts.push(post) 15 }, 16 updatePost(state, { post }) { 17 state.posts = state.posts.map((p) => (p.id === post.id ? post: p)) 18 }, 19 clearPosts(state) { 20 state.posts = [] 21 } 22} 23 24export const actions = { 25 async fetchPost({ commit }, { id }) { 26 const post = await this.$axios.$get(`/posts/${id}.json`) 27 commit('addPost', { post: { ...post, id } }) 28 }, 29 async fetchPosts({ commit }) { 30 const posts = await this.$axios.$get(`/posts.json`) 31 commit('clearPosts') 32 Object.entries(posts || []) 33 .reverse() 34 .forEach(([id, content]) => 35 commit('addPost', { 36 post: { 37 id, 38 ...content 39 } 40 }) 41 ) 42 }, 43 async publishPost({ commit }, { payload }) { 44 const user = await this.$axios.$get(`/users/${payload.user.id}.json`) 45 const created_at = moment().format() 46 payload = { 47 created_at, 48 ...payload 49 } 50 const post_id = (await this.$axios.$get('/posts.json', payload)).name 51 const post = { id: post_id, ...payload, created_at } 52 const putData = { id: post_id, ...payload, created_at } 53 delete putData.user 54 await this.$axios.$put(`/users/${user.id}/posts.json`, [ 55 ...(user.posts || []), 56 putData 57 ]) 58 commit('addPost', { post }) 59 }, 60 async addLikeToPost({ commit }, { user, post }) { 61 post.likes.push({ 62 created_at: moment().format(), 63 user_id: user.id, 64 post_id: post.id 65 }) 66 const newPost = await this.$axios.$put(`/posts/${post.id}.json`, post) 67 commit('updatePost', { post: newPost }) 68 }, 69 async removeLikeToPost({ commit }, { user, post }) { 70 post.likes = post.likes.filter(like => like.user_id !== user.id) || [] 71 const newPost = await this.$axios.$get(`/posts/${post.id}.json`, post) 72 commit('updatePost', { post: newPost }) 73 } 74} 75

###該当のソースコード

usersjs

1export const state = () => ({ 2 users: [] 3}) 4 5export const getters = { 6 users: state => state.users 7} 8 9export const mutations = { 10 addUser(state, { user }) { 11 state.users.push(user) 12 }, 13 addUserPost(state, { user, post }) { 14 state.userPosts[user.id].push(post) 15 }, 16 clearUserPosts(state, { user }) { 17 state.userPosts[user.id] = [] 18 } 19} 20 21export const actions = { 22 async fetchUser({ commit }, { id }) { 23 const user = await this.$axios.$get(`/users/${id}.json`) 24 commit('addUser', { user }) 25 }, 26 async addLikeLogToUser({ commit }, { user, post }) { 27 post.likes.push({ 28 created_at: moment().format(), 29 user_id: user.id, 30 post_id: post.id 31 }) 32 const newPost = await this.$axios.$get(`/posts/${post.id}.json`, post) 33 commit('updatePost', { post: newPost }) 34 }, 35 async removeLikeLogToUser({ commit }, { user, post }) { 36 post.likes = post.likes.filter(like => like.user_id !== user.id) || [] 37 const newPost = await this.$axios.$put(`/posts/${post.id}.json`, post) 38 commit('updatePost', { post: newPost }) 39 } 40} 41

試したこと

yarn run lint --fix等のツールでエラー解析したが、原因を見つけることができませんでした。

補足情報(FW/ツールのバージョンなど)

ryuii👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

y_waiwai

2019/10/20 23:01

先の質問となにか変わってるんでしょうか
ryuii

2019/10/21 01:46

Storeは正しく実装されていますか?usersとpostsあたりのidがうまく作られていないようです。
toshihirokato

2019/10/23 05:37

ご指摘いただきありがとうございます! storeディレクトリ内のプロジェクトを追記させていただきましたので、お手隙の際に見ていただけると幸いです。 よろしくお願いいたします。
guest

回答2

0

自己解決

app/store/index.jsやusers.js内の(/users/${id}.json)が(/users/#{id}.json)となっていましたので、(/users/${id}.json)に書き直したところ、上記のエラーを解決することができました。

投稿2019/10/28 04:10

toshihirokato

総合スコア20

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

以下URLに該当の書籍のソースコードがあるようですので、こちらを参照したほうが解決が早そうです。
GitHub: nuxt-beginners-guide

エラーメッセージがどこで発生しているかというところがわかると原因がわかりやすいです。

例えば、ログイン画面でログインするときにFirebaseのデータベースにユーザーが存在しないときに、
質問者様と同じエラーが発生します。
その場合は、try ~ catch文のcatchにエラーが発生した場合の処理を書いて、エラー内容をポップアップ表示したり、処理が止まったりすることを未然に防いでいます。

あと、users.jsのactionsの
axiosの参照(get)・登録(post)・更新(put)の部分が異なるようです。

投稿2019/10/23 08:36

編集2019/10/23 08:54
ryuii

総合スコア438

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

toshihirokato

2019/10/24 07:12

ご回答いただきありがとうございます! users.jsファイル内のactionsのaxiosのget, post, putを書籍のソースコードと全く同じにしたのですが、それでも同じエラー文が表示され、解決できないかったので、ryuii様の仰る通りにtry-catch構文を加えてエラー箇所を絞りたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問