Estoy trabajando en un proyecto next.js y estoy tratando de obtener la lista de gimnasios de getStaticProps de esta manera:
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet"; import { useState } from "react"; import { server } from '../config'; export default function Map ({gyms}){ console.log("data = "+ JSON.stringify(gyms)); return ( <MapContainer> <TileLayer url={`I deleted the url`} attribution='Nothing to see here' /> {gyms.map((gym, index) => { return ( <Marker key={index} position={[gym.address1, gym.address2]} draggable={true} animate={true} > </Marker> ); })} </MapContainer> ); } export async function getStaticProps() { const res = await fetch(`${server}/api/gyms`) const response = await res.json() const gyms = response.gyms console.log("gyms list = "+ gyms); if (!gyms) { return { notFound: true, } } return { props: { gyms, // Will be passed to the page component as props }, }; }Como puede ver, tengo un archivo console.log en getStaticProps, que no devuelve nada, y otro registro de consola en el componente que devuelve "data = undefined"
El error que recibo es: TypeError: no se pueden leer las propiedades de undefined (leyendo 'mapa')
El error que está recibiendo es del accesorio 'gimnasios'. Asegúrese de que si está usando useEffect en el componente donde está usando Map, la variable de matriz debe estar en la matriz. Dado que está obteniendo la matriz como indefinida, este es el problema más posible. Simplemente colóquelo en la matriz de esta manera:
useEffect(() => { //Code goes here... }, [gyms])