React调用API展示搜索新闻时出现map读取未定义属性错误

问题根源 #

你遇到的错误核心是状态赋值时引用了错误的API返回字段：

• NewsAPI的top-headlines接口返回的新闻数组字段是articles，但你代码里用了news.searched——这个字段不存在，导致setSearchedNews把状态设为undefined。
• 当searchedNews是undefined时，调用map()方法就会触发Cannot read properties of undefined (reading 'map')错误。
• 你看到console.log(news)有articles数组，但searchedNews为空/undefined，正是因为赋值时用错了字段名，没有正确把API返回的数组存入状态。

修复步骤 #

1. 修正状态赋值字段
   将setSearchedNews(news.searched)改为setSearchedNews(news.articles || [])，用|| []做兜底，确保即使API返回articles为空或不存在时，状态始终是数组，避免map报错。

2. 可选：添加加载状态处理（优化体验）
   因为API请求是异步的，初始渲染和请求过程中可以添加加载提示，避免空页面或错误闪现。

修正后的完整代码 #

function Searched() {
  const [searchedNews, setSearchedNews] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const params = useParams();

  const getSearched = async (name) => {
    setIsLoading(true);
    try {
      const data = await fetch(
        `https://newsapi.org/v2/top-headlines?apiKey=${process.env.REACT_APP_API_KEY}&q=${name}`
      );
      const news = await data.json();
      // 用API返回的articles字段，兜底空数组
      setSearchedNews(news.articles || []);
    } catch (err) {
      // 捕获请求错误，避免崩溃
      console.error('请求新闻失败:', err);
      setSearchedNews([]);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    getSearched(params.search);
  }, [params.search]);

  if (isLoading) {
    return <div>加载中...</div>;
  }

  return (
    <Grid>
      {searchedNews.map((item, index) => {
        // 添加key属性，符合React列表渲染要求
        return (
          <Card key={index}>
            <img src={item.urlToImage || '默认图片地址'} alt={item.title} />
            <h4>{item.title}</h4>
          </Card>
        );
      })}
    </Grid>
  );
}

额外优化点 #

• 给列表项添加key属性，避免React警告；
• 给urlToImage添加兜底值，防止图片加载失败；
• 添加try/catch捕获请求异常，增强代码健壮性；
• 增加加载状态，提升用户体验。

内容的提问来源于stack exchange，提问作者Awy McWar