【React】「型Promiseを割り当てることはできません」を解決したい

はじめに

リファクタリングで非同期処理をコンポーネント化しようとしたところ、型エラーに詰まってしまったので簡単にまとめてみます。

やりたいこと

①axiosでエンドポイントにアクセスして値を取得する処理を非同期で実行したい
②取得した値をセッターに渡して状態を更新したい
③①と②を1つのコンポーネントにしたい

方法

useEffectでaxiosを実行することで型エラーを解決できました。
エラーの原因としては、axiosの処理で値を取得する前に画面のレンダリングが走ってしまうことでした。この状態だとセッターに渡す値の型がPromise型となるため、型エラーになってしまっていました。
useEffectを使うと非同期処理が完了するまで待機してくれるため、値の取得が終わってからセッターに値を渡すことができます。これによってセッターが受け取る値の型がPromise型でなくなりました。

該当コード(解決前)

略
// useGetData内でaxiosを実行している
export const useGetData = async (data_id: string | undefined) => {
  const [data, setData] = useState<Data>()
  await axios.get(`${apiURL}/data/${data_id}`).then(function (res: AxiosResponse<Search>) {
    setData(res.data.data);
  });
  return data
}

該当コード(解決後)

略
// useEffect内でaxiosを実行している
export const useGetData = (data_id: string | undefined) => {
  const [data, setData] = useState<Data>()
  useEffect(() => {
    if (data_id === undefined) { return }
    const getData = async () => {
      await axios.get(`${apiURL}/data/${data_id}`).then(function (res: AxiosResponse<Search>) {
        setData(res.data.data);
      });
    }
    getData();
  }, [])
  return { data }
}

おわりに

型エラーと仲良くなりたいです。