未捕获的类型错误：无法读取未定义的属性(读取"map")[使用 Harry 编写代码教程]

Question

从"React"导入React，｛Component｝；从"导入NewsItem/NewsItem'；

导出类新闻扩展组件｛

constructor(){
super();
this.state={
articles:[],
page:1
}
}
async componentDidMount(){
let url="https://newsapi.org/v2/top-headlines?country=in&category&apiKey=myapikey";
let data=await fetch(url);
let pdata=await data.json();
console.log(pdata)
this.setState({
articles:pdata.articles
})
}
render() {
return (
<div className='container my-3'>
<h1 className='middle' style={{textAlign:'center'}}> Top Headlines</h1><br />

<div className="row ">
{this.articles.map((el)=>{
return    <div className="col-md-4" key={el.newsurl}>
<h1><NewsItem  title={el.title?el.title:""} description={el.description?el.description.slice(0,88):""}
newsimg={el.urlToImage?el.urlToImage:"https://images.wsj.net/im-479937/social"} newsurl={el.url?el.url:""}/></h1>
</div>
})}



</div>

</div>
);
}

}

导出默认新闻；

这是我的代码，我不明白为什么这会给我以下错误

News.js:32 Uncaught TypeError: Cannot read properties of undefined (reading 'map')

附言：这是一个从newsapi网站获取新闻并在webapp上显示的项目。

Answer 1

articles不是代码中的类变量。它是国家的一部分。您应该在渲染函数中使用this.state.articles.map。