71378


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

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

[code]

    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;
    
[/code]

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

[code]

    ',' が必要です。ts(1005)
    
[/code]

出力している

[code]

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

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

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

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


CC BY-SA 4.0
2020-10-21T06:56:23.317
71377
2021-04-04T00:51:53.707
2021-04-04T00:51:53.707
32986
27721
question
reactjs typescript react-jsx axios
ReactでAxiosを使用し結果を表示する仕組みで、mapのエラー(TS105)となる


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

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

[code]

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


CC BY-SA 4.0
2020-10-21T07:10:55.020
71378
2020-10-21T07:10:55.020
7997
71377
answer


最終的には、

[code]

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

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


CC BY-SA 4.0
2020-10-21T07:24:14.833
71380
2020-10-21T07:24:14.833
27721
71377
answer