Estoy tratando de hacer un polígono que pueda actualizarse con un clic.
Hice un polígono que contiene una matriz de coordenadas en su definición de posición, e hice esta función llamada change() que se supone que debe insertar las nuevas coordenadas en la matriz.
El problema es que tan pronto como abro la aplicación, solo ingresa las nuevas coordenadas incluso antes de presionar el botón.
Me familiaricé con una pregunta que se hizo aquí sobre cómo hacer una actualización en vivo para un polígono, y esta pregunta recibió una respuesta que muestra cómo hacer algo similar que está bastante cerca.
El problema es que el encuestado usa la class someFunction extends React.Component {} , mientras configuro mi función principal de esta manera: export default function App() Así que ahora quiero saber cómo puedo usar solo el mismo método en la forma "normal" de la función principal.
También encontré otras sugerencias que se usaron para otros casos y ninguna de ellas funcionó para mí.
Aquí está el código:
import 'leaflet/dist/leaflet.css'; import {MapContainer, TileLayer, Polygon} from 'react-leaflet'; const polygon1 = [ [51.515, -0.09], [51.52, -0.1], [51.52, -0.12], ] const polygon2 = [ [51.535, -0.14], [51.54, -0.13], [51.53, -0.125], ] const positions = [polygon1]; function change () { positions.push(polygon2); } export default function Example() { const classes = useStyles(); return ( <div> <MapContainer center={position} zoom={13} className={classes.map}> <TileLayer attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> <Polygon color={'purple'} positions={positions} /> </MapContainer> <Button onClick={change()}>Add Polygon</Button> </div> ) }Parece que no está familiarizado con React a juzgar por el código que ha proporcionado
si pasa change() , esto se invocará de inmediato y mutará el estado al presionar la variable de posiciones, esa es la razón por la que está viendo los dos polígonos dibujados en el mapa cuando la página aterriza
<Button onClick={change()}>Add Polygon</Button>En cambio, lo que debes hacer es:
Por lo tanto, deberías tener
export default function Map() { const [positions, setPositions] = useState([polygon1]); function handleClick() { setPositions((prevPositions) => [...prevPositions, polygon2]); } return ( <div> <MapContainer center={[51.515, -0.09]} zoom={13} style={mapStyle}> <TileLayer attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> <Polygon color={"purple"} positions={positions} /> </MapContainer> <button onClick={handleClick}>Add Polygon</button> </div> ); }