asyncでAPIを叩いて取得した値を使用したい

Question

asyncでデータを取得するとき、データがうまく設定できない

ReactでAPIからデータを取得して小コンポーネントに値を渡したいのですが、非同期で取得するため値を渡すときデータが空になってしまいます。
この場合どのように書けば、値を設定した後に渡せるでしょうか？
個人的にはhooks使う形になるのかなと思っています。何か良い方法があれば教えていただきたいです。

import Child from '/child'

const Component = ({children}: Props) => {
  const getData = async () => {
    return await axios.post('localhost:8080/data').then(r => r.data.token)
  }

  const link = {
    uri: '/data',
    data: getData() 
  }

  return <Child link={link}>{children}</Child> // この時点ではdataの値が空のままlinkに渡ってしまう
}

Answer 1

こんにちは

API の POST localhost:8080/data が成功すると

{  "token": "foobarbaz" }

のような形式のJSONが返ってくる想定だと思いますが、以下のように修正してみるといかがでしょうか？

const Component = ({ children }: Props) => {
  const getData = async () => {
    return await axios.post('localhost:8080/data').then(r => r.data.token)
  }

+ const [data, setData] = React.useState(null);
+
+ React.useEffect(() => {
+   (async () => {
+     const data = await getData();
+     setData(data);
+   })();
+ }, []);

  const link = {
    uri: '/data',
-   data: getData() 
+   data
  }

  return <Child link={link}>{children}</Child>;
}

上記では、data の初期値を null にしていますが、そこは何らか、dataの型に合わせて適切な初期値にする必要があるかもしれません。
参考になれば幸いです。

追記

ご質問の本題ではありませんが、APIを呼ぶ getData は必ずしもコンポーネントの中になくてもよいので、別の apis.ts のようなファイルに書いておいて、コンポーネントでこれを使う場合

import { getData } from '/apis';

のように、importしてもよいかもしれません。

Comments

[teis]

ありがとうございます！実現できました。

[teis]

hooksは切り離して定義しようと思います！

[jun68ykt]

どういたしまして????
> 実現できました。
とのことでよかったです????