reactjs - TypeError:无法读取未定义的属性(读取“地图”)
问题描述
constructor() {
super();
console.log("Hii this is a constructor");
this.State = {
articles: [],
loading: false
};
}
async componentDidMount() {
let url =
"https://newsapi.org/v2/top-headlines?country=in&apiKey=c7908fc25bbc49589fcaedcedfb2e114";
let data = await fetch(url);
let parsedata = await data.json()
console.log(parsedata)
this.setState({articles: parsedata.articles});
}
render() {
return (
<div className="container ">
<h3 className="my-3">Top Headlines </h3>
<div className="row">
{this.articles.map((element) => {
return (
<div className="col-md-4" key={element.url}>
<Nitems
title={element.title.slice(0, 50)}
description={element.description}
img={element.urlToImage}
nurl={element.url}
></Nitems>
</div>
);
})}
</div>
</div>
);
}
}
export default News;
解决方案
它应该是这样的:
this.state = { //<-- With non capitalize letter
articles: [],
loading: false
};
和这个:
this.state.articles.map((element) => //<-- With "state"
apiKey
也请隐藏你的
推荐阅读
- html - a11y | Mac 画外音正在阅读 aria-label 和所有嵌套文本
- reporting-services - ssrs 中 Web 门户 url 和 Web 服务 url 之间的区别
- python - 启动时更改 webdrivers ip
- javascript - 如何在更改/键入/输入到 Javascript 函数时使用替换 jQuery 函数
- node.js - aws-amplify node.js 包是否支持相互 TLS API 连接?
- c# - 向文件名以数字结尾的文件添加缓存控制
- python - 如何更改我的 RL 模型的输出形状?
- asp.net - 为什么在 Asp.net Core MVC 的 bootstrap sticky 标头下渲染剃须刀页面
- google-cloud-platform - 坚持遵守域验证要求
- kiwi-tcms - kiwi-tcms:kiwi_db 重启循环