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>

相反你应该做的是：

在状态变量中存储位置
通过复制改变位置而不改变变量
传递对 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>
  );
}

Demo

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

React leaflet: How to update positions to polygon

javascript

reactjs

leaflet

react-leaflet