使用Fetch API调用新闻接口时遇TypeError: map读取未定义属性问题求助

我尝试调用新闻API，但一直出现错误TypeError: Cannot read properties of undefined (reading 'map')，不确定是语法问题还是需要补充配置。以下是我的React组件代码，同时附上控制台错误截图，请求协助解决。

import React, { Component } from 'react'
import NewsItem from './NewsItem'
export default class News extends Component {
  constructor(){
    super();
    this.state={
        article : this.article
    }
  }
  
  async componentDidMount(){
    let urll = "https://newsapi.org/v2/top-headlines?country=in&apiKey=6aeca0faebbd45c1a1ec3c463f703ebb";
    let data = await fetch(urll); 
    console.log(data)
    let parseData = await data.json() ; 
    console.log(parseData);
    this.setState({article : parseData.articles});
  }

  render() {
    return (
      <div className='newcontainer my-5'>
        <h1 className='mainheading' >PAHADI PRESS BREAKING NEWS</h1>
        {this.state.article.map((e)=>{
          return <div key={e.url} >
            <NewsItem  title={e.title} decription={e.description} imageUrl={e.urlToImage} 
            newsUrl={e.url}
            newsauthor={e.author}/>
          </div>
        })
      }
      </div>
    )
  }
}

问题原因 #

1. 初始状态未正确初始化：构造函数里把article初始化为this.article，此时this.article是undefined，组件首次渲染时调用map会直接报错。
2. API请求存在潜在风险：如果API请求失败、返回结果格式异常（比如无articles字段），parseData.articles会是undefined，更新状态后依然会触发报错。

解决方案 #

1. 初始化正确的初始状态 #

把构造函数中的article初始化为空数组，确保首次渲染时map能正常执行（空数组不会渲染内容，但不会报错）：

constructor(){
  super();
  this.state={
      article : []
  }
}

2. 给API请求添加错误处理 #

用try-catch包裹请求逻辑，同时判断返回结果是否包含articles字段，避免异常数据导致状态更新出错：

async componentDidMount(){
  try {
    let urll = "https://newsapi.org/v2/top-headlines?country=in&apiKey=6aeca0faebbd45c1a1ec3c463f703ebb";
    let data = await fetch(urll); 
    console.log(data)
    let parseData = await data.json() ; 
    console.log(parseData);
    
    if (parseData.articles) {
      this.setState({article : parseData.articles});
    } else {
      console.error("API返回结果中不存在articles字段");
    }
  } catch (error) {
    console.error("API请求失败:", error);
  }
}

3. 可选：渲染时增加空值判断 #

在调用map前先确认this.state.article是有效数组，进一步避免报错：

{this.state.article?.map((e)=>{
  return <div key={e.url} >
    <NewsItem  title={e.title} decription={e.description} imageUrl={e.urlToImage} 
    newsUrl={e.url}
    newsauthor={e.author}/>
  </div>
})}

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