react-api呼び出しがまだ空の場合、マッピングは動作しません.

次のコードの最も重要な部分はapiをロードして文章を設定していないときです!すなわちarticles状態がnullの場合.このため、articlesがfalseの状態をif文で処理する必要があります.
私の知る限りでは、ユーザEffectに空の配列に依存すると、コンポーネントのロードに伴って初めて実行され、apiがロードされ、articlesが設定されレンダリングされると誤って認識されます.しかし、今回の経験から、実際のレンダリングは先に行われ、userEffectに空のレイアウトを与えるhookであることがわかります.

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import axios from 'axios';
import NewsItem from './NewsItem';

const NewsListBlock = styled.div`
  width: 768px;
  margin: 0 auto;
  margin-top: 2rem;
`;

export default function NewsList() {
  const [articles, setArticles] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await axios.get(
          'https://newsapi.org/v2/top-headlines?country=kr&apiKey=29a0160871334cf6861f6fb96d4f86c4'
        );
        console.log(response.data.articles);
        setArticles(response.data.articles);
      } catch (e) {
        console.log(e);
      }
      setLoading(false);
    };
    fetchData();
  }, []);

  if (loading) {
    return <p>로딩중</p>;
  }

  if (!articles) {
    return null;
  }

  return (
    <NewsListBlock>
      {articles.map(article => (
        <NewsItem key={article.url} article={article} />
      ))}
    </NewsListBlock>
  );
}

シングルラインサマリー
まずコンポーネントレンダリング、次にuserEffectです.受信状態でmapを返す場合、nullのままではmapが戻らないためエラーが発生します.したがって、ユーザEffectがapiを呼び出している場合、if(!articles)return nullが必要です.