質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

2972閲覧

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

ryo-0213

総合スコア2

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/12/30 11:01

編集2020/12/31 12:08

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ファイルの中身
jsonファイルの中身です

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

通常の関数から非同期関数を呼び出しても非同期関数の完了は待ってくれないため、(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}

投稿2020/12/31 14:30

itepechi

総合スコア248

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問