useStateを使ってjsonファイルの中身を出力したい

発生している問題

userprofilesには入っているのですが、optionsが空になっています

該当のソースコード

interface UserProfile {
  userName: string;
}

export default function Asynchronous() {
  const [options, setOptions] = useState<UserProfile[]>([]);

  useEffect(() => {
    let active = true;

    (async () => {
      const response = await fetch("http://localhost:8080/api/v1/userprofile");
      const userprofiles = await response.json();
      console.log(userprofiles);
      if (active) {
        setOptions(
          Object.keys(userprofiles).map(
            (key) => userprofiles[key] ) as UserProfile[]
        );
      }
    })();

  console.log(options);

optionsで出力しようとしているのですがうまく行きません。

補足情報（FW/ツールのバージョンなど）

"typescript": "^4.1.3",
"react": "^17.0.1",
"@material-ui/lab": "^4.0.0-alpha.57"

jsonファイルの中身です

行動規範の内容に同意します

回答1件

通常の関数から非同期関数を呼び出しても非同期関数の完了は待ってくれないため、(async () => ...の実行が完了する前にconsole.log()が実行されてしまっています。console.log()を非同期関数の中に移動することで解決します。

ts
1interface UserProfile {
2  userName: string;
3}
4
5export default function Asynchronous() {
6  const [options, setOptions] = useState<UserProfile[]>([]);
7
8  useEffect(() => {
9    let active = true;
10
11    (async () => {
12      const response = await fetch("http://localhost:8080/api/v1/userprofile");
13      const userprofiles = await response.json();
14      console.log(userprofiles);
15      if (active) {
16        setOptions(
17          Object.keys(userprofiles).map(
18            (key) => userprofiles[key]
19          ) as UserProfile[]
20        );
21      }
22
23      console.log(options); // 非同期関数の中に入れる
24    })();
25  });
26}