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
と整合性が取れていないのはご容赦ねがいます