Javascript 在react中刷新传单地图

缩放后我想刷新传单地图的圆圈：

从“React”导入React；
进口{
地图作为传单地图，
蒂莱耶，
标记，
圆圈
工具提示，
弹出窗口
}从“反应传单”；
从“react传单markercluster”导入MarkerClusterGroup；
从“/data.json”导入数据；
const TILE\u LAYER\u属性=
“Carto的地图分幅，在CC by 3.0下。OpenStreetMap的数据，在ODbL下”；
const TILE\u LAYER\u URL=
"https://cartodb-basemaps-{s} .global.ssl.fastly.net/light_all/{z}/{x}/{y}.png”；
导出函数映射（）{
常数位置=[55.2854062,23.9327383]；
常数initialZoom=8；
让showTooltip=false；
让mapRef=React.createRef（）；
常量渲染标记=（）=>{
showTooltip=mapRef&&mapRef.viewport&&mapRef.viewport.zoom>8？真：假；
设圆=[]；
圆圈=数据。地图（项目=>(
{showTooltip？1：
}

{item.address}，{item.city}

{item.time}

));
返回圈；
};
返回(
{mapRef=ref}}center={position}zoom={initialZoom}onzoomend={（）=>renderMarkers（）}>
{
{renderMarkers（）}
}
);
}

showTooltip

应该是使用

useState

的状态变量，所以当它更改时，组件将重新加载

此外，我认为如果使用函数组件，它应该是

useRef

，而不是createRef（），然后

<LeafletMap
      ref={mapRef}
...

{
const map=mapRef.current；
如果（地图）{
log（map.mopleElement.getZoom（））；
//在此处更改showTooltip标志
setShowTooltip（map.floapElement.getZoom（）>13？true:false）；
}
};
{data.map（项=>(
data
variable在哪里？它来自json文件，updatedI运行了您的示例，似乎可以工作。到底是什么问题？最初是在圆中渲染的（这很好），但在放大后应该显示1和1。但在放大后，不会重新绘制圆
  let [showTooltip, setShowTooltip] = React.useState(false);
  let mapRef = React.useRef();

  const renderMarkers = () => {
    const map = mapRef.current;

    if (map) {
      console.log(map.leafletElement.getZoom());
      // change here the showTooltip flag
      setShowTooltip(map.leafletElement.getZoom() > 13 ? true : false);
    }
  };



<MarkerClusterGroup showCoverageOnHover={false}>
          {data.map(item => (
            <Circle
 ....
<MarkerClusterGroup/>