使用Create-React-App开发新闻App时遇TypeError错误求助

你遇到的 Uncaught TypeError: Cannot read properties of undefined (reading 'map') 错误，本质是因为尝试对 undefined 调用 map 方法。下面是具体原因和修复步骤：

1. 初始状态未初始化 articles 数组 #

组件首次渲染时，componentDidMount 还未执行，此时 this.state.articles 是 undefined，直接调用 map 就会报错。

修复方法：
在组件构造函数中初始化 articles 为空数组：

constructor(props) {
  super(props);
  this.state = {
    articles: [] // 初始化为空数组，避免首次渲染时map报错
  };
}

2. data.json 未调用为函数 #

在 componentDidMount 中，data.json 是一个异步方法，需要加括号调用才能解析返回的JSON数据。你当前的代码只是引用了函数本身，导致 parsedData 不是API返回的对象，parsedData.articles 自然也是 undefined。

修复方法：
修改 data.json 为 data.json()：

async componentDidMount(){
    let url="https://newsapi.org/v2/everything?q=cricket&from=2022-12-17&sortBy=publishedAt&apiKey=c0056c186f54461cb0601a1608ae1b54"
    let data = await fetch(url)
    let parsedData=await data.json() // 此处添加括号调用函数
    console.log(parsedData)
    this.setState({articles:parsedData.articles || []}) // 额外处理：如果API返回articles为undefined，默认设为空数组
}

可选优化：添加加载状态 #

为了提升用户体验，可以在数据加载完成前显示加载提示：

render() {
  const { articles } = this.state;
  return (
    <div className='container my-3'>
      <h2>NewsMonkey - Top Headlines</h2>
      {articles.length === 0 ? (
        <div className="text-center">加载中...</div>
      ) : (
        <div className="row">
          {articles.map((element)=>{
            return <div className="col-md-4" key={element.url}>
              <NewsItem 
                title={element.title || ""} 
                description={element.description || ""} 
                imageUrl={element.urlToImage} 
                newsUrl={element.url}
              />
            </div>
          })}
        </div>
      )}
    </div>
  )
}

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