Анализатор RSS с использованием React завершается неудачно при обновлении страницы

Question

Сводка

Я использую rss-parser в React для анализа моего RSS-канала.

Проблема

Когда я впервые запускаю свой сервер разработки, данные из ленты загружаются нормально, и мой JSX отображается. Проблема возникает, когда я обновляю sh страницу.

Я получаю сообщение об ошибке:

"feed.items не определен"

Это только происходит, когда я повторяю sh страница, в противном случае она работает на начальном рендере.

Компонент

Вот мой компонент 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 и обновить sh без проблем. Вот так:

 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