React Native(Expo)解析RSS源报未处理Promise拒绝错误问题

• 日志打印两次是React 18+严格模式（Strict Mode）下开发环境的默认行为：开发环境会重复执行effect、state更新相关逻辑做合规性校验，生产环境构建后该现象会自动消失，不影响功能正常运行。
• 移动端抛出RSS解析错误的核心原因有三点：
  1. getNews函数标记了async但未做任何错误捕获，Promise链抛出的错误在React Native环境会直接触发未处理Promise拒绝告警，浏览器端容错性更高所以没有显性报错。
  2. 你使用的跨域代理会根据请求UA返回不同内容：桌面浏览器UA请求时正常返回XML格式的RSS内容，移动端默认UA请求时大概率返回HTML格式的拦截页、重定向页，rss-parser无法从HTML内容里识别到RSS节点，直接抛出解析失败错误。
  3. 现有渲染逻辑存在边界缺失：直接读取article.enclosures[0].url，如果某条新闻没有封面图字段，会直接触发空值读取错误，导致渲染崩溃；另外React Native的样式不支持px后缀的长度值，写"300px"会导致图片样式失效。

1. 完善RSS拉取逻辑，补全错误捕获和请求头配置 #

替换原有getNews函数，增加错误捕获、状态码校验、请求头指定，强制让代理返回正确的RSS格式内容：

const getNews = async () => {
  try {
    const response = await fetch('https://peaceful-peak-58941.herokuapp.com/https://www.huffpost.com/section/front-page/feed?x=1', {
      headers: {
        // 明确声明接受XML格式RSS内容
        'Accept': 'application/rss+xml, application/xml, text/xml',
        // 模拟桌面端Chrome UA，避免代理返回移动端拦截页
        'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
      }
    })
    if (!response.ok) throw new Error(`请求异常，状态码：${response.status}`)
    const responseText = await response.text()
    // 调试阶段可打印返回内容前200字符，确认拿到的是XML格式RSS而非HTML
    // console.log('返回内容预览：', responseText.slice(0, 200))
    const rssData = await rssParser.parse(responseText)
    setArticles(rssData.items)
  } catch (error) {
    console.error('RSS拉取解析失败：', error)
    setArticles([])
  }
}

记得在调用getNews的useEffect中正确配置依赖项，避免重复触发请求。

2. 修复渲染逻辑的边界判断和样式问题 #

替换原有渲染代码，增加空值判断，修正样式单位错误：

{articles.length > 0 ? articles.map(article=>(
  <View key={article.id} style={{width:"100%"}}>
    <Text style={styles.title}>{article.title}</Text>
    {/* 先判断封面字段存在再渲染图片，避免空值报错 */}
    {article.enclosures?.[0]?.url ? (
      <Image 
        style={{width:'100%', height: 300}}
        source={{uri: article.enclosures[0].url}}
      />
    ) : null}
    <Text style={styles.description}>{article.description}</Text>
  </View>
)) : <Text>加载中...</Text>}

改完之后重新在Expo模拟器里刷新即可正常拉取渲染内容。

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