Reactで外部APIを叩いて検索結果を表示したい

Question

Reactの勉強で簡易なアプリを作っています。フレームワークはNext.jsを使用しています。
入力されたキーワードをクエリとしてGoogle Book APIを叩き、その検索結果をSearchResultsのpropsに渡したいです。
キーワードをuseStateで管理し、submitボタンを押した際にデータを取得してコンソールに表示させるところまでできたのですが、取得したデータをどのようにしてSearchResultsコンポーネントに渡せばよいのか分からず詰まってしまいました。

何かアドバイスを頂けないでしょうか？

import { useState } from 'react';
import axios from 'axios';
import Layout from '../../components/Layout';

const getBooks = async (keywords: string) => {
  const url = `https://www.googleapis.com/books/v1/volumes?q=${keywords}`;
  const {
    data: { items },
  } = await axios.get(url);
  console.log(items)
  return items;
};

const BookSearch = () => {
  const [keywords, setKeywords] = useState('');

  return (
    <Layout title="Book Search | Next.js + TypeScript Example">
      <form
        onSubmit={e => {
          e.preventDefault();
          getBooks(keywords);
        }}
      >
        <input
          type="text"
          name="searchInput"
          onChange={e => setKeywords(e.target.value)}
        />
        <button type="submit">Search</button>
      </form>
      {/* <SearchResults /> getBooksで取得したデータをpropsで渡したい */}
    </Layout>
  );
};

export default BookSearch;

Answer 1

こんにちは

以下、コード修正、追加の一例を挙げます。（※APIが失敗したときの対応など、細部は詰めていません）

APIの結果から取得したい書籍データの属性を持つ Book type を定義しておきます。ここでは、とりあえず id, タイトル、出版社、出版日を持つ type としました。

type Book = {
  id: string
  volumeInfo: {
    title: string
    publisher: string
    publishedDate: string
  }
}

export default Book;

上記のソースファイル名を src/models/Book.ts として、BookSearch を以下のように修正します。

+ import Book from "../../models/Book";

const BookSearch = () => {
  const [keywords, setKeywords] = useState('');
+ const [books, setBooks] = useState<Book[]>([]);

  return (
    <Layout title="Book Search | Next.js + TypeScript Example">
      <form
-       onSubmit={e => {
+       onSubmit={async (e) => {
          e.preventDefault();
-         getBooks(keywords);
+         const books: Book[] = await getBooks(keywords);
+         setBooks(books);
        }}
      >
        <input
          type="text"
          name="searchInput"
          onChange={e => setKeywords(e.target.value)}
        />
        <button type="submit">Search</button>
      </form>
-     {/* <SearchResults /> getBooksで取得したデータをpropsで渡したい */}
+     <SearchResults books={books} />    
    </Layout>
  );
};

以下は上記の修正版を動作確認するためのサンプルです。SearchResults は動作確認のための簡単なもので、<table>で作りました。

• 動作確認用サンプル: https://codesandbox.io/s/q295714-kkthj

参考になれば幸いです。

Comments

[maskmelon]

うまくできました！Stateを追加すればよかったんですね。
わかりやすい回答をありがとうございました。

[jun68ykt]

どういたしまして
> うまくできました！
とのことでよかったです????