React中如何仅渲染一次数组元素 解决RSS Feed重复渲染问题

问题根因 #

你的代码存在3个核心错误导致重复渲染：

1. 未使用useEffect封装异步请求：React函数组件每次重渲染都会执行全部顶层代码，你的RSS请求逻辑直接写在组件顶层，会被反复触发，多次向DOM插入内容
2. 违反React声明式渲染规则：手动调用render方法直接操作DOM节点，而非通过状态驱动视图更新，循环调用render会反复覆盖/追加节点内容
3. 未使用状态存储数据：用普通变量存储RSS条目，组件重渲染时数据会重置，也无法触发React的自动更新逻辑

修复方案 #

直接替换MarinersFeed.js的代码即可：

import { useState, useEffect } from 'react';
// 引入逻辑放到组件外部，避免重复初始化
const Parser = require('rss-parser');

function MarinersFeed() {
  const herokuapplink = "";
  // 用state存储格式化后的RSS条目
  const [feedList, setFeedList] = useState([]);

  useEffect(() => {
    // 异步请求逻辑封装在useEffect中，空依赖保证仅组件挂载时执行1次
    const fetchRssFeed = async () => {
      const parser = new Parser();
      const feed = await parser.parseURL(herokuapplink.concat('https://www.mlb.com/mariners/feeds/news/rss.xml'));
      // 格式化数据后存入state
      const formattedItems = feed.items.map(item => ({
        title: item.title,
        link: item.link
      }));
      setFeedList(formattedItems);
    }
    fetchRssFeed();
  }, [])

  // 声明式渲染：直接遍历state生成视图
  return (
    <div id="home">
      {feedList.map((item, index) => (
        <>
          <h3 key={`index-${index}`}>{index}</h3>
          <h3 key={`title-${index}`}>{item.title}</h3>
          <h3 key={`link-${index}`}>{item.link}</h3>
          <br />
        </>
      ))}
    </div>
  )
}

修复说明 #

• 空依赖的useEffect保证RSS请求仅在页面首次加载时执行1次，不会重复发起请求
• 用useState存储RSS条目，状态更新时React会自动触发重渲染，无需手动操作DOM
• 遵循React声明式写法，直接在JSX中遍历数组渲染内容，避免手动调用render导致的重复插入问题

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