Блог

Сначала я извлекаю данные, затем создаю li элементы путем сопоставления arrdata , но li элементы внутри ul не видны, когда я возвращаю ul App.js

 import logo from './logo.svg';
import './App.css';
import '../src/Items'
import Item from '../src/Item';
import {useEffect,useState} from 'react'

     function App() {
          const [isLoaded,setloaded] = useState(false);
           var arrdata = []; //arrdata
           var movielist;
          useEffect(()=>{
           fetch ("https://react-http-bcc2a-default-rtdb.firebaseio.com/meals.json")
           .then(data=>data.json())
           .then((data)=>{
          for( const key in data ){
           arrdata.push({     //filling arrdata
           title:data[key].title,
           id:key,
           price:data[key].price
            })
         }
        return arrdata;
    })
   

    .then((arrdata)=>{
      movielist =  arrdata.map((movie)=>{
      return <li>{movie.title}</li> //elements to be rendered
     })
     setloaded(true);
     console.log(movielist)
    })
   
},[])


  if(isLoaded){
   return <> <ul>
    {movielist} // returning the li elements
   </ul>
   </>
  }
  else{
   return <> <div>...loading</div></>
      }
    }

 export default App;
 

вы должны определить переменную movielist как состояние, чтобы компонент повторно отображался при изменении фильмов.

 const [movielist, setMovielist] = useState([]); 

 setMovielist(
  arrdata.map((movie) => {
    return <li > {movie.title}< /li>;
  })
);