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

Question

実現したいこと

https://jsonplaceholder.typicode.com/todos/1　
上記のtitleオブジェクトを返すカスタムフックを作成したい

useInitialTodo

import axios from "axios";
import { useCallback } from "react";

const useInitialTodo = () => {
  const getTodo = useCallback(
    () => async () =>
      await axios
        .get("https://jsonplaceholder.typicode.com/todos/1")
        .then((res) => {
          return res.data.title;
        })
        .catch((err) => {
          console.log("error");
        }),
    []
  );
  return { getTodo };
};

export default useInitialTodo;

index.js

import "./styles.css";
import useInitialTodo from "./useInitialTodo";

export default function App() {
  const { getTodo } = useInitialTodo();
  const todo = getTodo();
  console.log(todo);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

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

AsyncFunctionが返される

該当のソースコード

https://codesandbox.io/s/axiostest-jtgp9o

試したこと

JSだけでtitleオブジェクトを返す関数を作成し、正常な挙動が起きることは確認しました
https://codesandbox.io/s/happy-fire-nziznn?file=/src/index.js

Answer 1

getTodoで() => async () =>としているので、書いての通りgetTodoは「async関数を返す関数」となっています。

手前の() => を削除してみてはどうでしょうか。

Comments

[yuki96]

早速ありがとうございます。（）＝＞を削除したところ、Promiseが返却されました
getTodo()の実行タイミングなどに問題があるのでしょうか。。？

[maisumakun]

> （）＝＞を削除したところ、Promiseが返却されました

はい、async関数を普通に呼び出すと、Promiseを返す関数となります。

[maisumakun]

> 指摘者の方へ

どのあたりが「攻撃的な表現を含む内容や公序良俗に反する内容」とお考えでしょうか。

Answer 2

質問にある jsonplaceholder の todos/:id APIを呼び出すところをカスタムフックにしてレスポンス内容をコンポーネントに表示するなら例えばこんな感じです。

App.js

import useTodoById from "./useTodoById";
import "./styles.css";

function App() {
  const [todo, error] = useTodoById(1);

  if (error) {
    return <p>{error.message}</p>;
  }

  return (
    <div className="App">
      {todo ? (
        <ul>
          <li>id: {todo.id}</li>
          <li>userId: {todo.userId}</li>
          <li>title: {todo.title}</li>
          <li>
            <input type="checkbox" checked={todo.completed} readOnly />
          </li>
        </ul>
      ) : (
        "Loading..."
      )}
    </div>
  );
}

export default App;

useTodoById.js

import { useEffect, useState } from "react";
import axios from "axios";

const useTodoById = (id) => {
  const [todo, setTodo] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    (async () => {
      const url = `https://jsonplaceholder.typicode.com/todos/${id}`;
      try {
        await new Promise((resolve) => setTimeout(resolve, 2500)); // Loading... が表示される時間を作る。
        const res = await axios.get(url);
        setTodo(res.data);
      } catch (err) {
        setError(err);
      }
    })();
  }, [id]);

  return [todo, error];
};

export default useTodoById;

codesandbox をforkして上記を試せるようにしました。

• 👉　https://codesandbox.io/s/axiostest-forked-0lg2bd

const [todo, error] = useTodoById(1); のところの 1 をたとえば 999 などに変えると、
Request failed with status code 404
というエラーメッセージが表示されます。

Comments

[yuki96]

ありがとうございます！無事に実装できましたm(_ _)m