如何在Next.js中实现从多个RSS源获取数据？

以下是修改后的代码，支持从多个RSS源获取数据并合并展示：

import { useEffect, useState } from 'react';

export default function Articles() {
    const [items, setItems] = useState([]);
    const [error, setError] = useState(null);
    // 定义多个RSS源地址，可按需增减
    const rssFeeds = [
        'http://rss.cnn.com/rss/cnn_topstories.rss',
        'http://feeds.bbci.co.uk/news/world/rss.xml',
        'https://www.npr.org/rss/rss.php?id=1001'
    ];
    const apiKey = 'kiu9hxfe1661vn0cmz3jpj8dueorj0idmiucugqr';

    useEffect(() => {
        async function fetchData() {
            try {
                // 为每个RSS源生成请求Promise，单个源失败时返回空数组不影响整体
                const fetchPromises = rssFeeds.map(feedUrl => {
                    const encodedUrl = encodeURIComponent(feedUrl);
                    return fetch(`https://api.rss2json.com/v1/api.json?rss_url=${encodedUrl}&api_key=${apiKey}`)
                        .then(res => res.json())
                        .catch(err => {
                            console.error(`获取${feedUrl}数据失败:`, err);
                            return { items: [] };
                        });
                });

                // 并行请求所有RSS源
                const allData = await Promise.all(fetchPromises);
                // 合并所有源的文章，截取前40条（可按需调整）
                const allItems = allData.flatMap(data => data.items).slice(0, 40);
                // 按发布时间倒序排序，确保最新内容优先展示
                const sortedItems = allItems.sort((a, b) => new Date(b.pubDate) - new Date(a.pubDate));
                
                setItems(sortedItems);
            } catch (err) {
                console.error('整体数据请求失败:', err);
                setError(true);
            }
        }

        fetchData();
    }, []);

    if (error) {
        return (
            <section>
                <div>
                    <h3>最新文章</h3>
                    <ul>
                        <p>获取数据失败，请稍后重试。</p>
                    </ul>
                </div>
            </section>
        );
    }

    return (
        <section>
            <div>
                <h3>最新文章</h3>
                <ul>
                    {items.map((item) => (
                        <div key={item.guid || item.link}> {/* 用唯一标识做key，避免index不稳定 */}
                            <a href={item.link} target="_blank" rel="noopener noreferrer">
                                <h3>{item.title}</h3>
                            </a>
                            <p>来源: {item.source_id}</p> {/* 标注文章来源，方便区分 */}
                        </div>
                    ))}
                </ul>
            </div>
        </section>
    );
}

关键改动说明： #

• 多源管理：新增rssFeeds数组集中管理所有RSS源地址，后续扩展只需添加新地址即可。
• 并行请求：通过Promise.all同时发起所有源的请求，提升加载效率，避免串行请求的等待时间。
• 容错处理：单个源请求失败时返回空数组，不影响其他源的数据展示，同时保留整体错误捕获逻辑处理极端情况。
• 数据优化：合并所有源的文章后按发布时间排序，确保内容按时间顺序展示；用文章的唯一标识（guid/link）作为React元素key，避免index导致的重渲染问题。
• 体验提升：新增文章来源标注，让用户清晰区分不同RSS源的内容。

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