実現したいこと
ReactでNewsAPIを取得するコードを書いています。
fetchでの書き方はネットで調べて実装できました。
axiosを使用して同じようにしたいのですがうまくいきません。
また、APIでデータを取得する際
axiosとfetchはどちらが使われるケースが多いのでしょうか。
使い分けについても教えていただきたいです。
該当のソースコード
import { useEffect, useState } from "react" import axios from 'axios'; function App2(params) { const [articles, setArticles] = useState([]); // axiosでのコード→上手くデータが取得できない useEffect(()=>{ axios.get('http://newsapi.org/v2/top-headlines?country=jp&apiKey=*****(APIキー)') .then(function(nn){ setArticles(nn.articles) }) },[] ) // fetchでのコード→正常にデータが取得できる // useEffect(() => { // const fetchData = async () => { // //ニュースを引っ張ってくるwebAPI // const url = "http://newsapi.org/v2/top-headlines?country=jp&apiKey=*****(APIキー)"; // const result2=fetch(url) // result2 // .then(rr=>rr.json()) // .then(data=>{ // setArticles(data.articles) // }) // }; // fetchData(); // }, [] // ); return ( <div> <ul> {articles.map(item=>( <li> <img src={item.urlToImage} alt="" width='100px' /> {item.title} {item.description} <a href={item.url} target='blank'>詳細</a> </li> ))} </ul> </div> ) } export default App2
試したこと
.then(function(nn){
setArticles(nn.articles)
})
ここの部分で上手くデータが取得できていないと思っていますが解決できませんでした。
補足情報(FW/ツールのバージョンなど)
APIキーは載せておりません。
自身の環境で正しいキーで動作しないことを確認しています。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。