React Hooks APIを取得する

f:id:jyoohashi:20210311210644p:plain

ReactでHTTP通信をするのをやってみた。ソースコードを以下にはっておきます。

まずは、「npm install axios」を最初にやっておくこと。

 

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

import axios from "axios";

export default function App() {
const [items, setItems] = useState();

const [isLoading, setIsLoading] = useState(false);

useEffect(() => {
const fetchData = async () => {
setIsLoading(true);

const result = await axios(
"https://hn.algolia.com/api/v1/search?query=react"
);

setItems(result.data.hits);
setIsLoading(false);
};
fetchData();
}, );

return (
<>
{isLoading ? (
<p>Loading</p>
) : (
<ul>
{items.map*1}
</ul>
)}
</>
);
}

 

*1:item) => (
<li key={item.objectID}>
<a href={item.url}>{item.title}</a>
</li>