1

Reactを始めたばかりで質問がおかしければ申し訳ございません

単純にAxiosで取得した結果を画面に列挙するだけのを勉強しています
以下のコードです

import React, { useState } from 'react'
import axios from 'axios';

const searchGoogleBooks = async (searchString: string) => {
  const url = 'https://www.googleapis.com/books/v1/volumes';
  const params = { q: searchString };
  try {
    const response = await axios.get(url, { params });
    return { isSuccess: true, data: response.data, error: null };
  } catch (error) {
    return { isSuccess: false, data: null, error };
  }
}

const Signin: React.FC = () => {
  const [searchResult, changeSearchResult] = useState<any>(null);

  const clickSignin = async () => {
    const result = await searchGoogleBooks('API');
    if (result.isSuccess) {
      changeSearchResult(result.data);
    } else {
      window.alert(String(result.error));
    }
  }

  return (
    <div>
      <form>
        <input type="button" value="Sign in" onClick={clickSignin} />
      </form>
      <ul>
        {
          searchResult !== null && ({
            searchResult.map((item: any) => {
              return (<li>{item.volumeInfo.title}</li>);
            })
          })
        }
      </ul>
    </div>
  );
}

export default Signin;

後半のsearchResult.map((item: any) => { .map.のところで以下のエラーが出て解消出来ず質問させていただきました

',' が必要です。ts(1005)

出力している

        {
          searchResult !== null && ({
            searchResult.map((item: any) => {
              return (<li>{item.volumeInfo.title}</li>);
            })
          })
        }

をコメントアウトすれば、APIの結果は取れているところまではは確認しています

mapの使い方が間違っているのかもしれませんが対応出来ずにいます
対応方法をご教示いただけないでしょうか

やっていることと、コンポーネントの名前Signinと整合性が取れていないのはご容赦ねがいます

2 件の回答 2

2

searchResult.mapをラップしている({})が不要ですね。

<ul></ul>の中身を次のように置換すると良いでしょう。

{searchResult !== null && searchResult.map((item: any) => {
  return <li>{item.volumeInfo.title}</li>;
})}
1
  • ありがとうございます。うまくいきました。ほかに悪いところもあったので、最終的なコードは別途記載します。mapあたりはネットのコードを流用していたのですが理解が出来ていませんでした。
    – nirgnehol
    Commented 2020年10月21日 7:23
1

最終的には、

{searchResult !== null && searchResult.items.map((item: any) => {
  return (<li key={item.id}>{item.volumeInfo.title}</li>);
})}

というように直しました。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。