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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

データベース

データベースとは、データの集合体を指します。また、そのデータの集合体の共用を可能にするシステムの意味を含めます

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

2312閲覧

Reactでaxios通信を行いLaravelからDBの情報を取得する

matsuda1

総合スコア2

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

データベース

データベースとは、データの集合体を指します。また、そのデータの集合体の共用を可能にするシステムの意味を含めます

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/05/17 09:26

前提・実現したいこと

Reactでaxios通信を行いLaravelからDBの情報を取得する。

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

Uncaught TypeError: Cannot read property 'id' of undefined

該当のソースコード

react

1const [user, setUser] = useState([]); 2const getUser = async () => { 3 const response = await axios.get(`/api/user/${props.match.params.username}`); 4 setUser(response.data) 5} 6console.log(user[0].id);

試したこと

まず、Laravelのコントローラーで戻り値を確認してみました。

local.DEBUG: [{"id":1,"screen_name":"@test_user1","name":"TEST1","profile_image":"https://placehold.jp/50x50.png","email":"test1@test.com","email_verified_at":null,"created_at":"2020-05-13T13:25:08.000000Z","updated_at":"2020-05-13T13:25:08.000000Z"}]

一応、DBから取得できています。

次にReact側で確認しました。

react

1console.log(user[0]); 2{id: 1, screen_name: "@test_user1", name: "TEST1", profile_image: "https://placehold.jp/50x50.png", email: "test1@test.com", …}

きちんと配列が入っています。

次にこの配列からidを取得しようとしたところ次のようなエラーがでました。

react

1console.log(user[0].id); 2Uncaught TypeError: Cannot read property 'id' of undefined

なぜ、idはあるのにundefinedになっているいのかがわかりません。

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

同じプロジェクトで

react

1const[item,setItem]=useState([{id:1,name:"バナナ"}]) 2console.log(item[0].id);

とやってみたらエラーはでず、ログでは1とあったので動作することは確認済みです。

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

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

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

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

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

guest

回答2

0

ベストアンサー

こんにちは

挙げられているコードが部分的なので、はっきりしたことは言えませんが、デバッグログを以下のように修正してみるといかがでしょうか?

diff

1- console.log(user[0].id); 2+ console.log(user);

このように修正すると、おそらく下記のように、2回ログが出力されているのを確認できるのではと思います。

  • 1回目: []

  • 2回目: [ {id: 1, screen_name: "@test_user1", name: "TEST1", … } ]

上記であるとすると、ログ出力行を console.log(user[0].id) としてしまうと、1回目のログ出力の時点では、user は空配列なので、user[0] は undefined になり、その id プロパティを取得しようとして、

Uncaught TypeError: Cannot read property 'id' of undefined

というエラーになっているものと思われます。
以上、参考になれば幸いです。

投稿2020/05/17 09:56

jun68ykt

総合スコア9058

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

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

0

全体を見ていないのでわかりませんが, おそらく最初 user を空配列としていて, そこに配列がsetされるのは getUser が呼ばれてからなのに, console.log で空配列である user の第一要素にアクセスしているのでundefined値が返ってきたのでは?と思いました

投稿2020/05/17 09:51

shinyaigeek

総合スコア112

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問