axiosのpostを同期処理で実行したい

Question

前提・実現したいこと

React(Typescript)でブラウザアプリを作成しています。
その際に表示データを取得したいのですが
必ずデータを取得してから次の処理を行ってほしいです。

下記の場合は非同期で処理するので
Hogeコンポーネントへの引数が初期化されない値と判定されます。

import { Hoge } from './components/Hoge';

let strAry: string[];
axios.post<string[]>("http://localhost:8080/", null, undefined).then((res) => {
  strAry = res.data;
});

function App() {
  return (
    <div>
      <Hoge strAry={strAry} />
    </div>
  );
}

export default App;

よろしくお願いいたします。

Answer 1

reactでvueのライフサイクルフック(ロード時での処理)のようなことをしたい場合はuseEffectフックを使用するといいです。

useEffect(()=>{
 …処理
},[])

Comments

[houeienoki]

strAryに値を設定するのは1回だけでよく かつ コンポーネントの処理がされる前にデータを必ず受信しておきたいというのがやりたいことになります。
サンプルが実装したいことと少し乖離していたので編集しました。

[FKM]

要はaxiosで取得したデータを前もって準備しておくなら、ReactのuseEffectフックを用います。その際に引数は空（[]）にしておくといいです。