Estoy trabajando en un proyecto next.js y estoy tratando de pasar datos de la página "gymlist" al componente "table".
esta es la página de "gimnastas" donde tengo la función getStaticProps:
export default function Gyms({gyms}) { return ( <Table gyms={gyms}/> ) } export async function getStaticProps() { const res = await fetch(`${server}/api/gyms`) const gyms = await res.json() console.log(gyms); if (!gyms) { return { notFound: true, } } return { props: { gyms, // Will be passed to the page component as props }, }; }el console.log muestra la lista de los gimnasios que tengo en la base de datos correctamente.
Este es el componente de la tabla donde aparece el error: gyms.map no es una función
export default function Table(props) { const [gyms, setGyms] = useState(props); return ( {gyms?.map((gym, index) => ( <p> {gym.name} </p> ))} ); }Cuando intenta usar props.gyms en su valor predeterminado useState , está pasando un objeto (el objeto props: { gyms: [...] } ), en lugar de la matriz de gimnasios.
Podría resolverse pasando props.gyms a useState : useState(props.gyms) , o simplemente usando props.gyms directamente en el renderizado de su componente: {props.gyms.map(...)} .
No necesita estado, en este caso.