React传单:如何将位置更新为多边形

Question

我正在尝试制作一个可以通过单击进行更新的多边形。

我制作了一个多边形，它的位置定义中包含一个坐标数组，我做了一个名为change()的函数，该函数应该将新的坐标推送到数组中。

问题是，当我启动应用程序时，它甚至在我按下按钮之前就已经输入了新的坐标

我熟悉了这里提出的一个问题，关于如何对多边形进行实时更新，这个问题得到了一个答案，显示了如何做类似的事情，这是非常接近的

问题是，那里的受访者使用class someFunction extends React.Component {}方法，而我设置的主要功能是：export default function App()所以现在我想知道如何只在"；正常的"；主要功能的形式。

我还发现了其他建议，这些建议用于其他情况，但没有对我有效

这是代码：

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='&copy; <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>
)
}

Answer 1

从您提供的代码来看，您似乎不熟悉React

如果您通过change()，它将立即被调用，并将通过推到位置变量来改变状态，这就是当页面到达时，您看到地图上绘制的两个多边形的原因

<Button onClick={change()}>Add Polygon</Button>

相反，你应该做的是：

1. 将位置存储在状态变量中
2. 更改位置而不通过复制变量来更改位置
3. 传递对onClick回调的引用

因此您应该有

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='&copy; <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>
);
} 

演示