Tengo un Array que tiene una variable booleana que decide que datos se muestran y cuales no, esos valores se cambian de un checkbox en otro componente, lo que me pasa es que al actualizar el array no se actualiza el mapa a los nuevos datos Si no se entiende el mensaje es porque estoy usando un traductor.
import './Leaflet.css' import React from "react"; import { MapContainer, TileLayer,} from 'react-leaflet' import { Data } from '../../components/data/SidebarData' import SubMapa from './SubMapa'; function Mapa() { const referencia = useRef(); const center = [8.890498870150504, -80.1123046875] console.log(`hola`) return ( <> <MapContainer center={center} zoom={8}> <TileLayer attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> {Data.map((items, index) => { return <SubMapa items={items} key={index} /> })} </MapContainer> </> ) } export default Mapa;Debe pasar sus Data como accesorio en lugar de importarlos; de lo contrario, el estado de su componente no cambiará y no se volverá a procesar.
En su componente:
const Mapa = ({ data }) => { const referencia = useRef(); const center = [8.890498870150504, -80.1123046875] console.log(`hola`) return ( <> <MapContainer center={center} zoom={8}> <TileLayer attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> {data.map((items, index) => { return <SubMapa items={items} key={index} /> })} </MapContainer> </> ) } export default Mapa;donde renderizas tu componente:
<Mapa data={Data} />