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

Question

摘要

我在React中使用rss解析器来解析我的rss提要。

问题

当我第一次启动开发服务器时，提要中的数据加载良好，并且呈现了我的JSX。刷新页面时会出现此问题。

我收到的错误是：

"feed.items is undefined">

只有当我刷新页面时才会发生这种情况，否则，它会在初始渲染中工作。

组件

这是我的RSS订阅源组件

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>
);

Answer 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