this.state.articles 在 React js 中未定义
Posted
技术标签:
【中文标题】this.state.articles 在 React js 中未定义【英文标题】:this.state.articles is undefined in React js 【发布时间】:2022-01-17 01:34:46 【问题描述】:我正在为我的项目创建一个新闻应用程序,我所做的基本上是从 API 获取新闻文章数组,然后将其存储在我本地内存中的文章数组中,然后我使用 map 方法数组,从而在我的网页上呈现文章,但现在我收到此错误:
image of the error
我看了一些类似的问题,我认为构造函数的范围有什么问题。 编辑:我在 setstate 部分错了,但我只是在尝试,但原始代码是这样的:
this.state =
articles: this.articles
上面的代码是在下面的代码是完整代码之前的setstate位置的原始代码
articles = [];
constructor()
super();
console.log(typeof articles);
this.state =
articles: this.articles
// let category = 'top-headlines';
// let country = 'in';
async componentDidMount()
const YOUR_API_KEY = 'cant show you this';
// let q = '';
let url = `https://newsapi.org/v2/top-headlines?country=in&apiKey=$YOUR_API_KEY`;
const FetchNews = async () =>
const response = await fetch(url);
const parsedjson = await response.json();
console.log(parsedjson);
this.setState( articles: parsedjson.articles );
FetchNews();
render()
return (
<div className="container p-1" style= backgroundColor: '#F0CE57' >
<div className="noogle">
<h1>Noogle</h1>
<input type="text" placeholder='Search News' />
</div>
<div className="row">
this.state.articles.map((element) =>
return <div className="col-md-4" key=element.url>
<NewsCard title=element.title desc=element.description imgurl=element.urlToImage url=element.url />
</div>
)
</div>
</div>
)
【问题讨论】:
您没有正确初始化状态。在构造函数中你只是将属性设置为一个对象,不要在这里调用setState
。
@BrianThompson 实际上我只是在尝试,但实际代码是这样的:`this.state = articles:this.articles`
【参考方案1】:
为什么要在构造函数中设置状态。相反,当您调用 this.setState() 函数时,它将设置文章的状态 试试这段代码
articles = [];
constructor()
super();
console.log(typeof articles);
this.state =
articles : []
// let category = 'top-headlines';
// let country = 'in';
【讨论】:
【参考方案2】:因为this.state
没有名为articles
的属性。它有一个名为this
的属性,该属性设置为...无论this.setState
在尝试将状态设置为this.articles
时返回的内容,该属性也不存在。这根本不是你想要的:
this.state =
this: this.setState( articles: this.articles )
我不知道你是从哪里拼凑出这个例子的,但这全错了。只需将状态值初始化为一个空数组即可:
this.state =
articles: []
然后在初始渲染时,您根本没有要显示的记录。当 AJAX 操作完成并设置新的状态值时,您将在下一次重新渲染时获得记录。
您不需要(或不想要)您的全局 articles
变量。它会诱使您直接改变值并导致奇怪的错误。
【讨论】:
以上是关于this.state.articles 在 React js 中未定义的主要内容,如果未能解决你的问题,请参考以下文章
Can't connect to MySQL server (hosted by strato) error: 2013 lost connection to mysql server at 'rea
pl/sql远程连接别人oracle数据库时,报错:ora-01034:oracle not available;ora-27101 shared memory rea