Tengo un componente que carga un mapa de Google según el Lat y Lng pasado, pero cuando cambio este valor, necesito que el mapa se represente en la pantalla.
const [getLat, setGetLat] = useState(geoLocation.mapsLat); const [getLng, setGetLng] = useState(geoLocation.mapsLng); const loadMap = getLat && getLng; useEffect((previousValue) => { const { zipCode } = formValues; if (zipCode !== previousValue) { console.log('need reload the map'); } }, [ ] );¿Cómo represento esta parte fija de mi código cuando sucede en console.log?
return ( {loadMap && ( <div className="container"> <label>Map</label> <Map lat={getLat} lng={getLng} handleClick={handleSubmit} /> </div> )} ) const [getLat, setGetLat] = useState(geoLocation.mapsLat); const [getLng, setGetLng] = useState(geoLocation.mapsLng); useEffect((previousValue) => { const { zipCode } = formValues; setGetLat(geoLocation.mapsLat); setGetLng(geoLocation.mapsLng); },[geoLocation.mapsLat,geoLocation.mapsLng]); return ( {getLat && getLng && ( <div className="container"> <label>Map</label> <Map lat={getLat} lng={getLng} handleClick={handleSubmit} /> </div> )} ) El código anterior debe resolver su problema. cada vez que zipCode el valor de su código postal, el componente se volverá a representar y su interfaz de usuario se actualizará.