74070


Reactでコードを書いた際に `yarn start` を十個すると、以下のエラーが発生しました。  
どこが間違っているのでしょうか。

**エラーメッセージ:**

[code]

    TypeError: Cannot read property 'map' of undefined
    
[/code]

**コード:**

[code]

    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;
    
[/code]


CC BY-SA 4.0
2021-02-17T07:37:41.343
74069
2021-02-17T07:56:01.177
2021-02-17T07:39:34.257
3060
40465
question
reactjs react-jsx
Reactでyarn startしたらTypeError: Cannot read property 'map' of undefinedが発生した


明らかな間違いは、useStateの初期化時に`articles`が指定されていません。

[code]

    const [data, setData] = useState({ articles: [] });
    
[/code]

次に、fetchのレスポンスが必ずしも`{ aritcles: [] }`を返してくると信頼できないので、

[code]

    setData(result);
    
[/code]

で`articles`を欠落させる可能性があります。したがって、次のように書くと良いと思います。

[code]

    (data.articles || []).map((news) => {
      return <NewsArticles key={news.url} news={news} />
    })
    
[/code]


CC BY-SA 4.0
2021-02-17T07:56:01.177
74070
2021-02-17T07:56:01.177
7997
74069
answer