Tengo un problema en desarrollo en el que la página termina de cargarse antes de que se envíen los datos desde la API. He intentado usar funciones asincrónicas pero eso no ayuda aunque estoy seguro de que debería. Creo que podría estar haciéndolo mal. A continuación se muestra un ejemplo de una página en mi aplicación donde estoy experimentando este problema:
import React, {useEffect, useState} from 'react'; import { useRouter } from 'next/router'; import axios from 'axios'; import Link from 'next/link'; import { Card, Button } from 'react-bootstrap'; export default function SingleTour() { const [tour, setTour]= useState({}); const [tourShows, setTourShows] = useState({}); const router = useRouter(); const {slug} = router.query; useEffect( () => { let enpoints = [ `http://localhost:3000/tours/${slug}`, `http://localhost:3000/listshows/${slug}` ] axios.all( enpoints.map((endpoint) => axios.get(endpoint))) .then(response => { console.log(response) setTour(response[0].data) setTourShows(response[1].data) }) .catch(error => console.log(error)) }, [slug]) console.log(tour); return ( <div className='container'> <div> <h1></h1> </div> <h3>Shows</h3> <div className='card-display'> {tourShows.data ? ( tourShows.data.map(({attributes, id}) => ( <Link href={`/shows/${id}`} passHref key={id}> <Card border="secondary" style={{ width: '18rem', margin: '1rem'}}> <Card.Body> <Card.Title>Show {id}</Card.Title> <Card.Text>{attributes.date}</Card.Text> <Card.Text>{attributes.location}</Card.Text> <Card.Text>Head Count {attributes.headcount}</Card.Text> </Card.Body> </Card> </Link> )) ) : 'LOADING ...'} </div> </div> ) }Cualquier ayuda es muy apreciada. También estoy usando Next JS si eso marca la diferencia.
Si usa el gancho useEffect, se espera que tenga un procesamiento antes de que se dispare el gancho para obtener los datos, esa es la forma en que funciona useEffect.
Si desea obtener sus datos dentro de la siguiente aplicación, debe usar getServerSideProps en su lugar, obtener los datos allí y pasarlos como apoyo al componente. Consulte los documentos aquí: https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props
Así es como funciona React. useEffect intentará obtener los datos y React continuará haciendo su negocio, renderizando el componente. Puede colocar una declaración if al comienzo de la declaración de devolución, por ejemplo, verificando la longitud de tourShows.data, si la longitud es 0, no devolverá nada, de lo contrario, regrese como lo hace ahora.