如何在React中使用RSS源获取多个新闻数据

Question

我已经完成了RSS Feed实现。现在我可以用这段代码获取1条新闻了。我想用这段代码获取多条新闻。我怎么能这么做。

感谢预付款。

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>
    );
  }
}

Answer 1

我已经完成了RSS实现。现在我可以用这段代码获取1条新闻了。我想用这段代码获取多条新闻。

不是像这样定义对象，

recentBlogPost: {
   name: '',
   url: ''
}

你需要定义一个array

recentBlogPost: []

现在，不只是设置第一次记录，

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
      }
   });
}

你需要设置完整的数组，

var myObj = JSON.parse(request.responseText);
this.setState({
    recentBlogPost: myObj.item
});

最后只显示1条记录，

<div>
   Check out our blog: <a target="_blank" href={this.state.recentBlogPost.url}>{this.state.recentBlogPost.name}</a>
</div>

你需要在状态数组上迭代，

{this.state.recentBlogPost.map(post=>{
    return <div key={post.title}>Check out our blog: <a target="_blank" href={post.link}>{post.title}</a></div>
})}

Answer 2

除了@ravibagul91 91的伟大解释之外，下面是完整的React组件。有关这项策略的详情，可参阅：

• Array.prototype.map()
• 如何在React中使用异步/等待
• 列表和密钥

    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>
        );
      }
    }

未设计的结果如下：

​

​