Javascript 使用react Typescript显示react传单标记聚类器中的所有聚类标记

我的React-Typescript应用程序正在使用

React-传单

和

React-传单markerclusterer

显示带有标记簇的传单地图

但是，我无法使地图显示地图视图中的所有簇标记。我正在尝试打字

中显示的错误之一。JS控制台是

不能在回调内调用React挂钩“useMap”。必须在React函数组件或自定义React钩子函数中调用React钩子

在VSCode中，还存在一个Typescript错误

对象可能“未定义”。ts（2532）

在线

const groupBounds = group.getBounds();

为什么会发生这种情况，正确的方法是什么来编写这个类型脚本代码

import React，{useffect，useRef}来自“React”；
从“react传单”导入{MapContainer、TileLayer、Marker、useMap}；
从“react传单markercluster”导入MarkerClusterGroup；
接口IProps{
标记：{
lat：数字；
lon：数字；
}[];
地图中心：{
lat：数字；
lon：数字；
};
}
导出函数MapView（{markers，mapCenter}:IProps）：JSX.Element{
const groupRef=useRef（）；
useffect（（）=>{
if（groupRef！==未定义）{
const group=groupRef.current；
const map=useMap（）；//错误：无法在回调内调用React Hook“useMap”。
const groupBounds=group.getBounds（）；//错误：对象可能是“未定义的”。ts（2532）
map.fitBounds（groupBounds）；
}
}, []);
返回(
{
markers.map（（标记，索引）=>(
))
}
)
}

这不是typescript问题，而是react问题。钩子。这同样适用于react传单的

useMap

。您可以将其移动到

useffect

之外。但是，

useMap

钩子调用必须是

MapContainer

的子组件的一部分，这样它才能访问传单上下文对象。您可以将此逻辑抽象为它自己的组件，如中所示，但我认为最好在创建带有状态变量的

时使用
来获取
L.Map
的实例，并将其用于以下效果：

导出函数MapView（{markers，mapCenter}:IProps）：JSX.Element{
const groupRef=useRef（）；
const[map，setMap]=useState（）；
useffect（（）=>{
if（groupRef&&map）{
const group=groupRef.current；
const groupBounds=group？.getBounds（）；
map.fitBounds（groupBounds）；
}
}，[map，groupRef]）；
返回(
setMap（map）}
moreProps={moreProps}
>
)
}

如果TS仍然抱怨
组
或
映射
未定义，您可以对其使用可选的属性运算符
？。
：

if（groupRef&&map）{
常量组=groupRef？当前值；
const groupBounds=group？.getBounds（）；
映射？.fitBounds（groupBounds）；
}

Typescript应该足够聪明，知道
groupRef
和
map
已经定义，就像它们在
if
语句中一样，但是它可能仍然会抱怨
group
被定义。您还可以执行
if（groupRef&&groupRef.current&&map）
来消除所有疑问

**注意：请确保您使用的是与react传单v3兼容的正确版本。
谢谢，创建时使用
对我非常有用。