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

Question

前提・実現したいこと

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

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

Uncaught TypeError: Cannot read property 'id' of undefined

該当のソースコード

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

試したこと

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

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

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

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

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

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

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

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

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

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

同じプロジェクトで

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

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

Answer 1

こんにちは

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

- console.log(user[0].id);
+ 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

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

Answer 2

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