Reactでコードを書いた際に yarn start
を十個すると、以下のエラーが発生しました。
どこが間違っているのでしょうか。
エラーメッセージ:
TypeError: Cannot read property 'map' of undefined
コード:
import React, { useState, useEffect } from "react";
import NewsArticles from "./components/NewsArticles";
import "./App.css";
const url =
"http://newsapi.org/v2/top-headlines?country=jp&category=technology&apiKey=APIKEY";
function App() {
const [data, setData] = useState({});
useEffect(() => {
const fetchData = async () => {
const resp = await fetch(url);
const result = await resp.json();
setData(result);
console.log(data);
};
fetchData();
}, [data]);
if (data) {
return (
<div className="App">
<h1>Welcome News App</h1>
{
data.articles.map((news) => {
return <NewsArticles key={news.url} news={news} />
})
}
</div>
);
} else {
return (
<div className="App">
<h1>Sorry no data received</h1>
</div>
);
}
}
export default App;