reactでjsonデータを取得した。

概要

reactで外部のjsonファイルのデータを読み込む依頼が来た。
昔phpとかjavascriptでやったことがあったが、reactではどうすれば良いか分からなかった。
めちゃぐくってみて学んだことを書いてみた。

やってみた。

const [holidayData, setHolidayData] = useState([]);

const JSON_URL = 'holiday.json';
useEffect(() => {
    fetch(`${process.env.REACT_APP_COMMON_IMG_PATH + JSON_URL}`, { method: 'GET' })
      .then(res => res.json())
      .then(data => {
        setHolidayData(data)
      })
}, []);

fetchで、JSONファイルのURLを書いた。
GETメソッドで取得するようにした。

fetchしたJSONファイルのresponseの値を取得する。

<div>{holidayData.content}</div>

最後は取得したデータをVIEW出す。
結果は以下のようになる。