Как получить данные с сервера и вывести их списком в функциональном React компоненте на хуках?

Question

В консоли все выводиться нормально а вот уже в gui варианте ругается что там массив. Подскажите как это побороть

let Parser = require('rss-parser'); let parser = new Parser();
     function News({ navigation })  {
         return(
             (async () => {
                 let feed = await parser.parseURL('https://kbgau.ru/rss.php');
                 feed.items.forEach(item => {
                     console.log(item.title)
                     <Text>{item.title}</Text>
                 });
             })()     
         ) }

Вот сама ошибка

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

Хотя консоль без ошибок все выводит

Answer 1

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
    <h2>News</h2>
    <div id="root"></div>
    <script
      src="https://unpkg.com/react@17/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/rss-parser.min.js"></script>
    <script type="text/babel">
      const parser = new RSSParser();
      const CORS_PROXY = "https://cors-anywhere.herokuapp.com/"

      function News({ navigation })  {
        const [feed, setFeed] = React.useState(null); // локальный стейт
        React.useEffect(()=> { // componentDidMount (второй параметр [])
           const getFeed = async() => {
              const response = await parser.parseURL( CORS_PROXY + 'https://kbgau.ru/rss.php');
              setFeed(response); 
           }  
           getFeed(); // вызов асинхронной фукции в эффекте
        }, [])  
        return(
           <React.Fragment> {/* оборачиваем код ниже в фрагмент */}
             {
               // в зависимосити от условия отображаем новости или лоадер
               feed ? feed.items.map((item, index) => ( 
                   <p key={index}>{item.title}</p>
               )): <p>минуточку...</p>
             }
           </React.Fragment>
        )
      }

      ReactDOM.render(<News />, document.getElementById("root"));
    </script>
  </body>
</html>

БЛОГ НА HUSL

Как получить данные с сервера и вывести их списком в функциональном React компоненте на хуках?

Ответы (1 шт):