React-How to display make objects loop in react-CodePudding

Here is what i tried

episode.js

import Parser from "rss-parser";
import React from "react";

export default function Episode() {
  
const parser = new Parser();
const url1 = "https://anchor.fm/s/75abc654/podcast/rss";
const [data, setData] = React.useState({});
 
 (async  () => {
    let data = await parser.parseURL(url1);
  setData(data);
   // console.log(data.title)
   // data.items.forEach((item) => {
      // console.log(item.title)
      //console.log(item.pubDate.slice(5, 17))
      //console.log(item.enclosure.url)
      // console.log(item.itunes.image)
    });
  })();
return(
  <h1>{item.title}</h1>

  {data.items.map((item, index)=>{
  return(
     <h1>{item.title}</h1>
   )})}

)

}

And the output is blank screen.. No error in console.. Help me to get the data from the rss feed without blank screen

CodePudding user response：

You're calling async method unlimited time! You need to call it once via useEffect just when component rendered for first time:

import Parser from "rss-parser"; 
import React, { useEffect } from "react";

function Episode() {
  const parser = new Parser();
  const url1 = "https://anchor.fm/s/75abc654/podcast/rss";
  const [data, setData] = React.useState({});

  useEffect(() => {
    (async () => {
      let data = await parser.parseURL(url1);
      console.log(data);
      setData(data);
    })();
  }, []);

  return (
    <>
      {data.items?.map((item, index) => (
        <h1>{item.title}</h1>
      ))}
    </>
  );
}
export default function App() {
  return <Episode />;
}

CodePudding user response：

Just replace your async function with a useEffect hook like this

useEffect(() => {
  async function fetchMyAPI() {
    let data = await parser.parseURL(url1);
    setData(data);
    // console.log(data.title)
    // data.items.forEach((item) => {
    // console.log(item.title)
    //console.log(item.pubDate.slice(5, 17))
    //console.log(item.enclosure.url)
    // console.log(item.itunes.image)
  }
  fetchMyAPI();
}, []);

This will be executed once every time when your component is loaded on screen

Also change the data.item.map to

{data.items?.map((item, index) => {
    return <h1>{item.title}</h1>;
 })}

Else it will throw error on first render