如何通过.isoDate排序RSS feed并保持条目title与link的对应关联

核心问题 #

你之前的实现方案问题在于将标题、链接拆分到两个独立数组存储，排序时很容易出现索引错位，导致标题和链接不匹配，这也是条目多了之后出错的核心原因。你只需要将单个条目的所有关联属性存在同一个对象里，统一存储在单个数组中，就可以彻底避免这个问题。

实现步骤 #

• 合并状态：删掉分开存储的completeFeed、feedTitle、feedLink三个状态，替换为单个feedItems状态，每个元素是包含title、link、isoDate的对象，天然保证属性关联。
• 排序逻辑：ISO格式的时间字符串可以直接转为Date对象比较大小，倒序排列（最新在前）直接用new Date(b.isoDate) - new Date(a.isoDate)即可。
• 修复useEffect语法问题：React的useEffect不支持直接传入async函数，需要在内部定义async方法再调用，避免控制台警告。

修改后的完整代码 #

import React from 'react';
// 建议把rss-parser的import放在组件外，不要在useEffect里动态require
import Parser from 'rss-parser';

function MarinersFeed() {
  const [disable, setDisable] = React.useState(false);
  // 单个数组存储所有feed条目，每个条目包含所有关联属性
  const [feedItems, setFeedItems] = React.useState([]);

  React.useEffect(() => {
    // 内部定义异步函数再调用，符合useEffect规范
    const fetchFeed = async () => {
      const parser = new Parser();
      const feed = await parser.parseURL('你的代理地址/https://www.mlb.com/mariners/feeds/news/rss.xml');
      
      // 先按isoDate倒序排序（最新条目在前）
      const sortedItems = feed.items.sort((a, b) => {
        return new Date(b.isoDate) - new Date(a.isoDate);
      }).map(item => ({
        // 只保留需要用到的属性
        title: item.title,
        link: item.link
      }));

      setFeedItems(sortedItems);
    };

    fetchFeed();
  }, []);

  const renderData = () => {
    // 直接遍历单个数组，不需要靠索引匹配不同数组的属性
    return feedItems.map((item, index) => {
      return <div key={index} >
        <h3>
          {item.title}
          <Button onClick={(e) => {
            e.preventDefault();
            window.open(item.link, "_blank")
          }}>查看详情</Button>
        </h3>
      </div>
    })
  }

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

export default MarinersFeed;

补充说明 #

如果需要按旧的在前排序，只需要把排序逻辑里的a和b位置互换即可：new Date(a.isoDate) - new Date(b.isoDate)。

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