React Native拉取Google RSS Feed偶发undefined报错求解决方案

• 异步时序错误：fetch是异步请求，调用getFeed()后你立刻将shouldFetch设为false，此时请求还未返回，rssFeed仍为初始空数组，下方!shouldFetch分支的逻辑会立刻执行，访问空数组的随机下标自然会得到undefined，调用undefined.links就会抛出对应错误。偶尔运行成功只是请求响应速度刚好快于逻辑执行的巧合，不具备稳定性。
• 随机数范围不合理：你固定生成0-99的随机数，但Google RSS返回的新闻条目数通常不足100条，就算rssFeed已经赋值完成，随机到超过数组最大下标的值时仍然会取到undefined触发报错。
• 顶层逻辑执行时机不合理：将请求触发、随机取数逻辑直接放在组件根作用域，每次组件重渲染都会重复执行，会进一步放大时序问题。

将请求逻辑放在useEffect中仅在组件挂载时触发，随机取数逻辑移到请求成功回调内执行，同时修正随机数范围、增加非空判断兜底，修正后代码如下：

import { useState, useEffect } from 'react';

// 原有rssParser、react-native-url-preview等引入保持不变
const YourComponent = () => {
  const [rssFeed, setRssFeed] = useState([]);

  // 组件挂载时仅执行一次请求
  useEffect(() => {
    getFeed();
  }, []);

  function getFeed() {
    fetch(
      "https://news.google.com/rss/search?q=cars&hl=en-GB&gl=GB&ceid=GB%3Aen"
    )
    .then((response) => response.text())
    .then((responseData) => rssParser.parse(responseData))
    .then((rss) => {
      const feedItems = rss.items || [];
      setRssFeed(feedItems);
      // 请求成功、rssFeed赋值完成后再执行随机取数逻辑
      getRandomFeeds(feedItems);
    })
    .catch(err => {
      // 可自行添加请求失败的兜底处理
      console.log('RSS请求失败', err);
    });
  }

  function getRandomFeeds(feedList) {
    // 条目不足4条时直接取全部，避免死循环
    const needCount = Math.min(4, feedList.length);
    const randomArr = [];
    while (randomArr.length < needCount) {
      // 随机数范围和数组实际长度绑定，避免下标越界
      const r = Math.floor(Math.random() * feedList.length);
      if (randomArr.indexOf(r) === -1) {
        randomArr.push(r);
        // 可选链非空判断兜底，彻底避免属性访问报错
        const item = feedList[r];
        if (item?.links?.[0]?.url) {
          console.log(r + " " + item.links[0].url);
        }
      }
    }
    // 后续将随机条目传递给react-native-url-preview渲染的逻辑写在这里即可
  }

  // 原有组件UI渲染逻辑保持不变
  return (
    // 你的UI代码
  )
}

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