No puedo lidiar con ese problema. Tengo ubicaciones de objetos. hay objetos con información sobre la posición, la función y el color del icono. Lo envío a Map. Al principio, se muestra bien, pero luego, cuando filtro la matriz y envío nuevos para mostrar que no genera nuevos. Agrego el estado a la clase y lo establezco. Después de verificar, veo en la consola que todo está bien con los cambios, pero los marcadores siguen siendo los mismos. Por favor ayuda
las ubicaciones también son un estado en el componente principal sin estado.
Componente de mapa
import React, {Component} from 'react' import GoogleMapReact from 'google-map-react' import MarkerClusterer from '@google/markerclusterer' export default class GoogleMapContainer extends Component { state = { locationsToShow: null } componentDidMount () { const script = document.createElement('script') script.src = 'https://developers.google.com/maps/documentation/javascript/examples /markerclusterer/markerclusterer.js' script.async = true document.body.appendChild(script) } componentDidUpdate(prevProps) { if (this.props.locations !== prevProps.locations) { this.setState({locationsToShow: this.props.locations}) } } static defaultProps = { center: { lat: 59.95, lng: 30.33 }, zoom: 11 } render () { const setGoogleMapRef = (map, maps) => { this.googleMapRef = map this.googleRef = maps let locations = this.props.locations console.log('locations w propsie') let markers = this.state.locationsToShow && this.state.locationsToShow.map((location) => { let item = new this.googleRef.Marker({position: location.position, icon: location.icon }) google.maps.event.addListener(item, 'click', location.fn) return item }) console.log('markerow jest') let markerCluster = new MarkerClusterer(map, markers, { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m', gridSize: 60, minimumClusterSize: 2 }) } return ( <GoogleMapReact bootstrapURLKeys={{key: `apiKey`}} yesIWantToUseGoogleMapApiInternals onGoogleApiLoaded={({map, maps}) => setGoogleMapRef(map, maps)} defaultCenter={{lat: 52.193275, lng: 20.930372}} defaultZoom={7} options={{streetViewControl: true}} /> ) } }elemento de compensación principal
let locationsList = filteredData.map((el) => { const lati = Number(el.location.latitude).toFixed(6) const longi = Number(el.location.longitude).toFixed(6) return {position: { lat: Number(lati), lng: Number(longi) }, icon: typeOfIcon(el.status), fn: ()=>{ setIsOpen(true) setData(el) } } }) setLocations(locationsList)setGoogleMapRef solo se llama cuando se crea una instancia del componente del mapa, supongo (quieres esto). por lo tanto, debe acceder al mapa y actualizar sus ubicaciones en su función de representación fuera de la devolución de llamada setGoogleMapRef .
algo como lo siguiente:
render () { const setGoogleMapRef = (map, maps) => { this.googleMapRef = map this.googleRef = maps this.markerCluster = //... }; if (this.googleMapRef) { let locations = this.props.locations console.log('locations w propsie') let markers = this.state.locationsToShow && this.state.locationsToShow.map((location) => { let item = new this.googleRef.Marker({position: location.position, icon: location.icon }) google.maps.event.addListener(item, 'click', location.fn) return item }) console.log('markerow jest') // update marker cluster } return //...; }