使用 React 的 RSS 解析器在页面刷新时失败答案

【问题标题】：RSS parser using React fails on page refresh使用 React 的 RSS 解析器在页面刷新时失败
【发布时间】：2020-03-01 12:23:18
【问题描述】：

总结

我在 React 中使用 rss-parser 来解析我的 RSS Feed。

问题

当我第一次启动我的开发服务器时，来自提要的数据加载正常并且我的 JSX 被渲染。当我刷新页面时，问题就出现了。

我收到的错误是：

“feed.items 未定义”

这仅在我刷新页面时发生，否则，它适用于初始渲染。

组件

这是我的 RSS Feed 组件

import React, {useState, useEffect} from 'react'
import RSSParser from 'rss-parser'

const RssFeed = () => {
  const [feed, setFeed] = useState([])

  useEffect(() => {
    const CORS_PROXY = "https://cors-anywhere.herokuapp.com/"
    let parser = new RSSParser();
    parser.parseURL(`${CORS_PROXY}https://papabearcodes.com/rss.xml`, function (err, feed) {
      if (err) throw err;
      setFeed(feed)
      console.log(feed)
    })
  }, [])

    return (
    <div>
        <h1>RSS Feed</h1>
        <p>{feed.title}</p>
        {feed.items.map((item, i) => (
            <div key={i}>
                <h1>{item.title}</h1>
                <p>{item.content}</p>
            </div>
        ))}
    </div>
    );
  }

export default RssFeed

如果我不遍历这些项目，我可以访问 feed.title 并毫无问题地刷新。像这样：

 return (
    <div>
        <h1>RSS Feed</h1>
        <p>{feed.title}</p>
    </div>
    );

【问题讨论】：

您的初始状态似乎不正确。如果它类似于const [feed, setFeed] = useState({ title: "", items: [] })，您可能不会遇到这个问题，因为feed.items 在第一次渲染期间将是一个数组（现在它在第一次渲染期间是undefined）

标签： javascript reactjs asynchronous rss

【解决方案1】：

您的初始状态似乎不正确。如果它类似于const [feed, setFeed] = useState({ title: "", items: [] })，您可能不会遇到这个问题，因为feed.items 在第一次渲染期间将是一个数组（现在它在第一次渲染期间是undefined）

import React, {useState, useEffect} from 'react'
import RSSParser from 'rss-parser'

const RssFeed = () => {
  const [feed, setFeed] = useState({ title: "", items: [] })

  useEffect(() => {
    const CORS_PROXY = "https://cors-anywhere.herokuapp.com/"
    let parser = new RSSParser();
    parser.parseURL(`${CORS_PROXY}https://papabearcodes.com/rss.xml`, function (err, feed) {
      if (err) throw err;
      setFeed(feed)
      console.log(feed)
    })
  }, [])

    return (
    <div>
        <h1>RSS Feed</h1>
        <p>{feed.title}</p>
        {feed.items.map((item, i) => (
            <div key={i}>
                <h1>{item.title}</h1>
                <p>{item.content}</p>
            </div>
        ))}
    </div>
    );
  }

export default RssFeed

【讨论】：