React+LaravelでAPIによるデータの取得

Question

前提・実現したいこと

下記URLを参考にAPIによるデータの取得をやっていたのですが、useStateにユーザー情報は入るのですが、その中からidとかを取り出そうとするとundefinedになり取り出せません。
https://reffect.co.jp/laravel/laravel6-react-router#i-3

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

app.js:70681 レンダリング
app.js:70722 undefined
app.js:70699 実行中
app.js:70681 レンダリング
app.js:70722 undefined
app.js:70681 レンダリング
app.js:70722 undefined
app.js:70706 成功

該当のソースコード

function Profile(props){
    console.log("レンダリング");
    const [user, setUser] = useState([]);

    useEffect(() => {getUser()},[])

    const getUser = async () => {
        console.log("実行中")
        const response = await axios.get(`/api/user/${props.match.params.username}`);
        setUser(response.data)
        console.log("成功");
    }
    console.log(user.id);

試したこと

console.log(user);にしてみると以下のように変わりました。

app.js:70681 レンダリング
app.js:70722 []
app.js:70699 実行中
app.js:70681 レンダリング
app.js:70722 [{…}]0: {id: 1, screen_name: "@test_user1", name: "TEST1", profile_image: "https://placehold.jp/50x50.png", email: "[e-mail]", …}length: 1__proto__: Array(0)
app.js:70706 成功

最初には空配列でその後useEffectが実行され、APIでユーザー情報が取得できるまではわかるのですが、なぜ参考記事ではその中の値が取り出せ、自分の場合は取り出せないのかがわかりません。

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

React/16.2.0
react-dom/16.2.0
axios/0.19

Comments

[hoshi-takanori]

API の結果が User の配列になってるのでは。

[matsuda1]

確認してみたところ、APIの結果が配列になっていました。
元の質問の趣旨とはずれるのですが、この場合配列の中身を取り出す場合には以下のようにmap関数を使ってとりだせたのですが、もっと簡単な方法はありますか？

console.log(user.map(item=>item.id));

以下のコードでは初期値に空配列を設定しているため、エラーが起きました

console.log(user[0][0].id);

[hoshi-takanori]

API の結果が配列ということは、User 1 つかも知れないし 3 つかも知れないし 0 個かも知れないってことなので、個数にかかわらず適切な処理を行うという意味では map を使うのが最も簡単な方法かと。

ところで、user[0][0].id だと単なる配列ではなく、配列の配列ってことになりますけど…。

[matsuda1]

API の結果が配列なのでuserは以下のような配列になると思うのですが、違うのですか？
[[{id:1,name:”太郎”}]]

違うのであれば、初期値が空配列なので、配列が省略されてこうなるのでしょうか？
[{id:1,name:”太郎”}]

質問続きで申し訳ないです。

[hoshi-takanori]

たぶん後者だとは思いますが、実際に API を叩いて結果をご確認ください。

[matsuda1]

結果は後者の配列になっていました。
質問に答えていただきありがとうございました。！

Answer 1

APIの結果が配列だったので、以下のようにmap関数で取り出すことで解決しました。

console.log(user.map(item=>item.id));