Estoy creando una aplicación web que obtiene datos de la API usando axios y muestra los datos.
Sin embargo, obtener la API lleva demasiado tiempo, por lo que utilicé el componente Loader y, una vez que finalizó el método GET de axios, quería mostrar los datos obtenidos.
Pero mi problema es que se recupera sin errores, Loader funciona perfectamente y, una vez que se realiza la recuperación, Loader se apaga. Pero mis datos mapeados no se muestran en la web. ¿Como puedo solucionar este problema?
const [isLoading, setLoading] = useState(true); const [lunchData, setLunchData] = useState(mockServingData); useEffect(() => { axios.get(URL).then((response) => { setLunchData(response.data.menu[0].lunch); lunch = lunchData.lunch; setLoading(false); }); }, []); if (isLoading) { return <div className="App"><Loader type="spin" color="RGB 값" message="Loading..." /></div>; } const lunchMenuList = lunch.map((menu, index) => ( <li key={index}>{menu}</li> )); return ( <div className="App"> {lunchMenuList} </div> );