[英]How to fetch Multiple news data using RSS Feed in React JS
I already done RSS Feed
implementation. 我已经完成了
RSS Feed
实现。 Now I'm able to fetch 1 News using this code. 现在,我可以使用此代码获取1条新闻。 I want to fetch multiple news using this code.
我想使用此代码获取多个新闻。 How can I do that.
我怎样才能做到这一点。
Thank in advances. 在此先感谢。
class FetchDataFromRSSFeed extends Component {
constructor() {
super();
this.state = {
recentBlogPost: {
name: '',
url: ''
}
}
}
FetchDataFromRssFeed() {
var request = new XMLHttpRequest();
request.onreadystatechange = () => {
if (request.readyState == 4 && request.status == 200) {
var myObj = JSON.parse(request.responseText);
for (var i = 0; i < 1; i ++) {
this.setState({
recentBlogPost: {
name: myObj.items[i].title,
url: myObj.items[i].link
}
});
}
}
}
request.open("GET", "https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fblog.codecarrot.net%2Ffeed.xml&order_dir=desc&count=30", true);
request.send();
}
componentDidMount() {
{this.FetchDataFromRssFeed()}
}
render() {
return (
<div>
Check out our blog: <a target="_blank" href={this.state.recentBlogPost.url}>{this.state.recentBlogPost.name}</a>
</div>
);
}
}
I already done RSS Feed implementation. 我已经完成了RSS Feed的实现。 Now i'm able to fetch 1 News using this code.
现在,我可以使用此代码获取1条新闻。 I want to fetch multiple news using this code.
我想使用此代码获取多个新闻。
Instead of defining object like this, 而不是像这样定义对象,
recentBlogPost: {
name: '',
url: ''
}
you need to define an array
, 您需要定义一个
array
,
recentBlogPost: []
Now instead of setting first record only, 现在,不再只设置第一条记录,
var myObj = JSON.parse(request.responseText);
for (var i = 0; i < 1; i ++) {
this.setState({
recentBlogPost: {
name: myObj.items[i].title,
url: myObj.items[i].link
}
});
}
You need to set complete array, 您需要设置完整的数组,
var myObj = JSON.parse(request.responseText);
this.setState({
recentBlogPost: myObj.item
});
And finally displaying only 1 record as, 最后只显示1条记录,
<div>
Check out our blog: <a target="_blank" href={this.state.recentBlogPost.url}>{this.state.recentBlogPost.name}</a>
</div>
You need to iterate over the state array, 您需要遍历状态数组,
{this.state.recentBlogPost.map(post=>{
return <div key={post.title}>Check out our blog: <a target="_blank" href={post.link}>{post.title}</a></div>
})}
Adding to the great explanation by @ravibagul91, here's the complete React component. 除了添加@ ravibagul91的出色解释之外,这是完整的React组件。 Details on the strategy can be found in:
有关该策略的详细信息,请参见:
import React, { Component } from "react";
export default class FetchDataFromRSSFeed extends Component {
constructor() {
super();
this.state = {
items: []
};
}
async componentDidMount() {
try {
const response = await fetch(
"https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fblog.codecarrot.net%2Ffeed.xml&order_dir=desc"
);
const json = await response.json();
this.setState({ items: json.items });
} catch (error) {
console.log(error);
}
}
render() {
console.log(this.state);
return (
<div>
Check out our blog:
{this.state.items.map(item => (
<li key={item.guid}>
<a target="_blank" rel="noopener noreferrer" href={item.link}>
{item.title}
</a>
</li>
))}
</div>
);
}
}
The unstyled results look like this: 未样式化的结果如下所示:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.