[Project-簡易日記]APIの呼び出し

4485 ワード
project API json useEffect React テキストリンク
  • ライフサイクルを使用して素子マウント時にAPIを呼び出し、APIの結果値を日記データの初期値とする
    =>素子マウント時の日記データのロード
  • JSONプレースホルダをfetchとしてAPI導入

    • 知るところ

  • useEffect使い方
    • const dataId = useRef(0);

const getData = async() => {
  const res = await fetch('https://jsonplaceholder.typicode.com/comments').then((res)=>res.json())

  const initData = res.slice(0,20).map((item) => {
    return {
      author : item.email,
      content : item.body,
      emotion : Math.floor(Math.random() * 5)+1,
      created_date : new Date().getTime(),
      id : dataId.current++
    }
  })

  setData(initData)
}
    async/awaitを使用して非同期関数を同期関数のように動作させる
    =>データのインポート後、実行setData(initData)returnを使用するため、current++(接尾辞増加)で次のid値を設定します.
    i++(接尾辞増加):接尾辞を使用して増加し、行から増加する値を使用します.
    ++i(電位増加):増加値として電位増加を用いる공부하며 정리&기록하는 ._. 씅로그
    [pythonベース]Code-kata week 2-2
    [BOJ]1505-区間積を求める