ReactにてAPIのデータをうまく表示できません。

Question

下記のページの
https://api.hatchways.io/assessment/students
情報を表示させたいのですが
うまく表示できません。

import React, {useState, useEffect} from 'react';
import axios from 'axios';


const Top = () => {
  const [post, setPosts] = useState([])

  console.log(post);
  console.log(post.students);

  useEffect(() => {
    axios.get('https://api.hatchways.io/assessment/students')
    .then(result => {
        setPosts(result.data)
    })
  }, []);

  return (
    <div>
      {post.students[0].city}
    </div>
  );
}

export default Top;

  console.log(post);
  console.log(post.students);

の部分は写真の通りコンソールではAPIの内容を表示できているのですが
return内で表示されません。

最終的な目標はMapなどでPost変数の一覧を表示させたいと思っていますが
一つの要素を表示させるところで躓いています。。

Answer 1

解決しました！

JSON APIの情報は、
{"students":[この中に25個要素があるリスト]}
という形になっており、
setPosts(result.data.students);
このようにresult.dataの中のstudentsと指定して取得できました。
そして、post変数にresult.data.studentsを格納すれば、postの中身は25個要素がある配列です。この一つ一つの要素には、city, company, email …などのフィールドがそれぞれ用意されていて
map関数を用いて以下のように表示ができました！

<div> {post.map((data, i) => <p key={i}>{data.city}</p>)} </div>

Answer 2

axiosによる通信は非同期のものなので、初回表示時には間に合いません。

結果、最初はpostの値として初期値の[]が使われますが、[].students[0].cityはundefinedに対する参照となってしまい、エラーとなってしまいます。

Comments

[Tomato_leaf]

理解力が足りなく申し訳ありません。
となりますとここではpost変数の中身は表示させることはできないということでしょうか？
（axiosは使用できない？）

[maisumakun]

「初期値として参照してもエラーにならないような、適切なダミーデータを与える」あるいは「データが取れていない間は表示を割愛する、ロード中の表示にする」などの方法で対応できます。