Actualmente estoy tratando de agregar un mapa de folleto a nextjs. Con latitud y longitud predefinidas en el componente, la pantalla ya funciona.
Ahora quiero mostrar los datos recuperados de mi API en el componente como longitud y latitud.
Esto no funciona porque data.latitude no está configurado hasta mi página de índice.
¿Alguno de ustedes tiene una idea de cómo obtener data.latitude y data.longitude de mi página de índice en el componente?
Este es el código del componente Mapa:
import React from "react"; import { TileLayer } from "react-leaflet"; import "leaflet/dist/leaflet.css"; import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css"; import StyledMapContainer from "./styled.js"; import { Marker, Popup } from "react-leaflet"; import MarkerIcon from "../mapmarker/index.jsx"; import { data } from "../../pages/index"; console.log(data); const Map = () => { return ( <StyledMapContainer watch enableHighAccuracy zoomControl center={{ lat: data?.longitude, lng: data?.latitude }} zoom={[13]} scrollWheelZoom={false} > <TileLayer url="https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}@2x?access_token=" zoomControl={true} /> <Marker position={{ lat: data?.longitude, lng: data?.latitude }} icon={MarkerIcon}> <Popup>The Ship is here!</Popup> </Marker> </StyledMapContainer> ); }; export default Map;El código del índice es:
const Description = () => { const { reload, query } = useRouter(); const { nr } = query; const { name } = query; const [data, setData] = useState(); const [unixTime, setunixTime] = useState(); const NoSsrMap = dynamic(() => import("../../atoms/map/index"), { ssr: false }); useEffect(async () => { const { data } = await axios.get(`http://localhost:5000/${nr}`); const extractedData = data.data; setData(extractedData); if (extractedData) { const unixTimestamp = data.data.unixtime; const millisecons = unixTimestamp * 1000; const dateObj = new Date(millisecons); const humanDateformat = dateObj.toLocaleString(); setunixTime(humanDateformat); } }, []); const MyMap = () => { return ( <div> <NoSsrMap /> </div> ); };Prueba esto
<StyledMapContainer watch enableHighAccuracy zoomControl center={{ lat: data?.longitude, lng: data?.latitude }} zoom={[15]} scrollWheelZoom={false} >Creo que falta una parte de index.js, pero veo algunas mejoras para su código en este momento.
En primer lugar, no debe usar useEffect así en index.js, así no es como funciona useEffect para hacer una función asíncrona, puede intentar algo como esto
useEffect(() => { const fetchData = async () => { const { data } = await axios.get(`http://localhost:5000/${nr}`); // ... do something with data like setData }; fetchData(); }, []);Esto se debe a que el método useEffect debería ser una función normal. Después de eso, podría intentar pasar datos a través de accesorios en el componente Mapa, por ejemplo
const Map = ({data = {}}) => { return ( <StyledMapContainer watch enableHighAccuracy zoomControl center={{ lat: data.longitude, lng: data.latitude }} zoom={[13]} scrollWheelZoom={false} > <TileLayer url="https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}@2x?access_token=" zoomControl={true} /> <Marker position={{ lat: data.longitude, lng: data.latitude }} icon={MarkerIcon}> <Popup>The Ship is here!</Popup> </Marker> </StyledMapContainer> ); }; export default Map;Al hacer esto, su componente Mapa no depende de la página/índice. Cuando intente pasar accesorios en importación dinámica, intente esto
const NoSsrMap = dynamic(() => import("../../atoms/map/index"), { ssr: false }); const MyMap = ({data}) => { return ( <div> <NoSsrMap data={data} /> </div> ); };Y finalmente use MyMap en su página de índice
<MyMap data={data}/>Con esto, su componente de mapa debería funcionar correctamente.