Tengo el siguiente archivo map.jsx en mi aplicación de reacción, que muestra un mapa en la pantalla. Estoy tratando de agregar un marcador a este mapa (en un componente separado llamado 'MyGreatPlace') que cambia de ubicación cada 2 segundos. Solo debería actualizar el marcador en lugar de actualizar todo el mapa, sin embargo, recibo el siguiente error:
Uncaught TypeError: setState is not a functionA continuación se muestra mi código:
import GoogleMapReact from 'google-map-react'; import './map.css'; import MyGreatPlace from './my_great_place.jsx'; import React, { useEffect, useRef, useState, setState } from 'react'; const Map = ({ location, zoomLevel, markerLat, markerLong }) => { useEffect(() => { const interval = setInterval(() => { changeMarkerLatitude(); }, 2000); return () => clearInterval(interval); }, []); const changeMarkerLatitude = () => { setState({ markerLat: markerLat + 50, }); }; return ( <div className='map'> <div className='google-map'> <GoogleMapReact bootstrapURLKeys={{ key: 'KeyID' }} defaultCenter={location} defaultZoom={zoomLevel}> <MyGreatPlace lat={markerLat} lng={markerLong} text={'A'} /> </GoogleMapReact> </div> </div> ); }; export default Map;¿Alguien sabe cómo puedo solucionar este error o existe una forma alternativa de actualizar la ubicación del marcador?
Así no es como usas los objetos de estado. useState es para componentes funcionales y lo invoca proporcionando dos valores. Primero, la referencia al valor real, y segundo, la referencia al colocador. Entonces const [stateVal, setStateVal] = useState() le brinda una referencia indefinida a un objeto de estado y una referencia a una función para actualizarlo. NUNCA muta el estado directamente (por ejemplo, stateVal = newVal). SIEMPRE usa el setter para mutar el estado (lo que desencadena una nueva representación). Siempre puede inicializar el valor pasando un valor a la llamada useState() . Así: setStateVal(newVal)
import GoogleMapReact from 'google-map-react'; import './map.css'; import MyGreatPlace from './my_great_place.jsx'; import React, { useEffect, useRef, useState, setState } from 'react'; const Map = ({ location, zoomLevel, markerLat, markerLong }) => { const [markerLatVal, setMarkerLatVal] = useState(markerLat) // You can put value in here to initialize useEffect(() => { const interval = setInterval(() => { changeMarkerLatitude(); }, 2000); return () => clearInterval(interval); }, []); const changeMarkerLatitude = () => { // 'prev' gives you access to the previous state value setMarkerLatVal(prev => prev + 50); }; return ( <div className='map'> <div className='google-map'> <GoogleMapReact bootstrapURLKeys={{ key: 'KeyID' }} defaultCenter={location} defaultZoom={zoomLevel}> <MyGreatPlace lat={markerLat} lng={markerLong} text={'A'} /> </GoogleMapReact> </div> </div> ); }; export default Map; <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>