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

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

新規登録して質問してみよう
ただいま回答率
86.12%
JavaScript

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

React.js

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

解決済

async/awaitを用いたデータ取得

yuki96
yuki96

総合スコア26

JavaScript

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

React.js

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

1回答

0リアクション

0クリップ

218閲覧

投稿2022/10/04 09:21

編集2022/10/04 09:42

前提

todoアプリを作成しており、todoの初期値として
https://jsonplaceholder.typicode.com/todos/1
のtitleオブジェクトを設定したい

そのために該当のtitleオブジェクトを返すカスタムフックを作成している

※アプリは別のファイルで作成しており、実装を検証するためにカスタムフックのみcodesandboxで作成している状況です

実現したいこと

App.js内のconsole.log(initialTodo)にuseStateの初期値(undifined)がまず渡ってくるのを回避したい
⇨カスタムフック内のasync/awaitを用いたデータ取得で用いたtodoTitleがinitialTodoにまず渡ってくるようにしたい

質問内容

・前提(再掲)
実際のアプリではinitialTodoが、todo一覧のstateに初期値として設定されるような仕様を予定しています
現状のカスタムフックだと、initialTodoの初期値であるundifinedがtodo一覧の初期値に渡る仕様となってしまい、これを回避したいと考えています。

・質問内容
以下の2通りで回避策を考えてみましたが①は冗長、②はイメージがわかないので、②のサンプルコードないしその他の回避策があればご教示いただきたいです🙇‍♀️

①initialTodoのstateを定義する場所を変える(async/awaitでデータを取得した後にする)

②initialTodoがundifinedならtodo一覧の初期値から外すという実装にする

発生している問題・エラーメッセージ

undifined(useStateの初期値)がconsole.logに出力される

該当のソースコード

https://codesandbox.io/s/jian-zheng-9swbmx?file=/src/App.js

※実装予定のアプリのコードは下記です
https://github.com/yuki96422/react-todo

App.js

import "./styles.css"; import useInitialTodo from "./useInitialTodo"; export default function App() { const [initialTodo] = useInitialTodo(); console.log(initialTodo); return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>{initialTodo}</h2> </div> ); }

useInitialTodo.jsx

import axios from "axios"; import { useState, useEffect } from "react"; const useInitialTodo = () => { const [initialTodo, setInitialTodo] = useState(); useEffect( () => async () => { try { const result = await axios.get( "https://jsonplaceholder.typicode.com/todos/1" ); const todoTitle = result.data.title; setInitialTodo(todoTitle); } catch (err) { alert("error"); } }, [] ); return [initialTodo]; }; export default useInitialTodo;

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

2022/10/04 09:44

こちらの質問が他のユーザーから「過去に投稿した質問と同じ内容の質問」という指摘を受けました。

y_waiwai

2022/10/04 09:30

したいことはかかれてますが、 しつもんはなんでしょうか

まだ回答がついていません

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

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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

React.js

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