如何修改NodeJS环境下的RSS解析器，实现内容按最新排序？

我用Node.js搭建了一个RSS解析器，使用npm的rss-parser包，但有时获取到的Feed内容不是按最新条目排序的。我知道可以利用RSS Feed里的pubDate或isoDate标签来排序，请问该怎么修改现有的React组件代码实现按最新内容排序？

原组件代码如下：

function MarinersFeed() {
  const [disable, setDisable] = React.useState(false);

  const [completeFeed, setCompletedFeed] = React.useState([]);
  const [feedTitle, setFeedTitle] = React.useState([]);
  const [feedLink, setFeedLink] = React.useState([]);

  React.useEffect(async () => {
    let Parser = require('rss-parser');
    let parser = new Parser();

    const tFeed = [];
    const tFeedTitle = [];
    const tFeedLink = []
    
    let feed = await parser.parseURL('https:*******.herokuapp.com/https://www.mlb.com/mariners/feeds/news/rss.xml');
    feed.items.forEach(item => {
      //sort by using item.isoDate, keep item.title and item.link connected
      tFeed.push(item.title);
      tFeedLink.push(item.link);
    });

    setCompletedFeed(tFeed);
    setFeedLink(tFeedLink);
  }, []);

  const renderData = () => {
    return completeFeed.map((f, index) => {
      const link = feedLink[index]
      const fullFeed = completeFeed[index]

      return <div key={index} >
        <h3>{fullFeed}
          <Button onClick={(e) => {
            e.preventDefault();
            console.log(link)
            window.open(link, "_blank")
          }}></Button></h3>
      </div>
    })
  }

  return(
    <>
      {renderData()}
    </>
  )
}

export default MarinersFeed;

修改思路 #

1. 不要将标题、链接拆分到不同数组中，直接保留完整的Feed条目对象，避免索引对应错误
2. 利用isoDate字段将条目转换为Date对象，进行降序排序（最新内容在前）
3. 简化状态管理，只维护一个存储处理后条目的状态

修改后的完整代码 #

function MarinersFeed() {
  const [disable, setDisable] = React.useState(false);
  // 改为存储完整的Feed条目对象
  const [feedItems, setFeedItems] = React.useState([]);

  React.useEffect(async () => {
    let Parser = require('rss-parser');
    let parser = new Parser();

    let feed = await parser.parseURL('https:*******.herokuapp.com/https://www.mlb.com/mariners/feeds/news/rss.xml');
    
    // 对feed.items按isoDate降序排序
    const sortedItems = [...feed.items].sort((a, b) => {
      // 将isoDate转换为Date对象，通过时间戳差值实现排序
      return new Date(b.isoDate) - new Date(a.isoDate);
    });

    setFeedItems(sortedItems);
  }, []);

  const renderData = () => {
    return feedItems.map((item, index) => {
      return <div key={index} >
        <h3>{item.title}
          <Button onClick={(e) => {
            e.preventDefault();
            console.log(item.link)
            window.open(item.link, "_blank")
          }}></Button></h3>
      </div>
    })
  }

  return(
    <>
      {renderData()}
    </>
  )
}

export default MarinersFeed;

关键说明 #

• [...feed.items]创建原数组的副本，避免直接修改原数据导致的潜在问题
• 如果Feed中没有isoDate字段，可以替换为pubDate，排序逻辑一致：return new Date(b.pubDate) - new Date(a.pubDate);
• 直接使用条目对象的title和link属性，彻底避免了多数组索引不匹配的问题，代码更简洁可靠

内容的提问来源于stack exchange，提问作者corbinc1998