React で Hooks を使っているとします。 画面を表示した時に、外部APIから取得した情報を表示したい場合には、どうすればよいでしょうか？
React Hooks で画面を表示したときに一度だけ処理を行いたいときには useEffect を使います。 外部APIにリクエストをするのに、今回は axios を使います。 axios を使って、githubのAPIのレスポンスのデータをコンソールに出力するには、以下のように書くことができます。
useEffect(() => {
const getUser = async () => {
const response = await axios.get('https://api.github.com/users/tagty');
console.log(response.data)
}
getUser()
}, [])axios は Promise ベースのHTTPクライアントです。 axios で外部APIにリクエストして、結果をコンソールに出力するときには以下ように書くことができます。
axios.get('https://api.github.com/users/tagty')
.then(function (response) {
console.log(response.data);
})async await を使うと以下のように書くことができます。
const getUser = async () => {
const response = await axios.get('https://api.github.com/users/tagty');
console.log(response);
}
getUser()React Hooks で、レンダー後にAPIのレスポンスを取得する場合はどうすればよいでしょうか？ レンダー後に処理を実行したい時には useEffect を使います。 useEffect は、関数コンポーネント内で副作用を実行することができます。 useEffect を使って、ドキュメントのタイトルを更新したいときには以下のように書きます。
useEffect(() => {
document.title = `Title is updated.`;
});useEffect の第一引数には副作用関数を渡します。 下記のように、 useEffect の第一引数に Promise を渡すことはできません。
useEffect(async () => {
const response = await axios.get('https://api.github.com/users/tagty');
console.log(response.data)
})副作用を1度だけ、マウント時とアンマウント時にのみ、実行したいという場合、 [] を第2引数として渡します。
今回はレンダー時に1度だけ、外部APIを呼び出したいので、第二引数に [] を渡します。
useEffect(() => {
const getUser = async () => {
const response = await axios.get('https://api.github.com/users/tagty');
console.log(response.data)
}
getUser()
}, [])上記のコードは、github APIからユーザの情報を取得しています。 取得した情報を画面に表示するにはどうすればよいでしょうか？ 実際に動く例を Codepen で公開しました。
エムステージでは、エンジニアを募集しています。 興味のある方は こちら から連絡をいただけると幸いです。