Componentの中で非同期関数を呼びたい！！！

オギャ！！！！！（死）

<someElement 
  text = {APIService.callAPI().then(()=>{
      res.data === true
  }) === true}
>

</someElement>

↓

↓

これでは動きません

Step1: コンポーネントで切り分けようね

こんな複雑なことやるエレメントはしっかり切り分けましょう。

サクッと新しいファイルを作って、PropsとComponentを作りましょう

interface hogeProps {
  data1: string;
  data2: string;
}

function hogeComponent({
  data1,
  data2,
}: hogeProps{
  
  const res = await APIService.callAPI(data1, data2)
  return (
    <div>
      {res}
    </div>
  )
}

export default hogeComponent

このComponentを呼び出したら〜〜〜〜〜〜？？？？？

動く〜〜〜〜〜〜〜〜！！！

まだ動きません

Step2: 非同期関数をuseEffectで呼び出そうね

ここで死にます

  const res = await APIService.callAPI(data1, data2)

asyncじゃない関数でawaitすると死にます

そんなあなたにuseEffect()

こんな感じにしましょう

import { useEffect, useState } from 'react';

====
省略
====
  const [resData, setResData] = useState(false)

  useEffect( () => {
    const useApi = async () => {
      const res = await APIService.callAPI(data1, data2)
      setResData(res.data)
    }
    useApi()
  }, [data1, data2])

useStateで定義したresDataに、APIService.callAPIのレスポンスのメンバであるDataが格納されます。

useEffectは、第二引数の値（指定なしだと全てのStateやProps？らしい）の状態変化に反応して、第一引数のコールバックを実行するエラいやつ

ただ自分もめっちゃ詳しくはわかってないので勉強中です。

参考

React hooksでapiなどの非同期処理(async/await)を実施する方法と注意点 - Qiita