React Hooks APIを取得する
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>