在弄清楚如何处理 TypeScript 和use-supercluster库之后,我已经“让它工作”了,直到我遇到一个新问题:每当我使用useSuperCluster()函数时,我都会得到一个空数组。
我正在遵循创作者的指南,所以我可以处理我自己的项目。
这就是我所做的:
const [bounds, setBounds] = useState(undefined as BBox | undefined);
const { data, error } = useSwr(API_URL, fetcher);
const coords: Array<ParkingData> = data && !error ? data.data : [];
const points: Array<PointFeature<GeoJsonProperties>> = coords.map(pd => ({
type: "Feature",
properties: {
cluster: false,
pdId: pd._id,
category: 'test'
},
geometry: { type: "Point", coordinates: [ pd.lat, pd.lng ] }
}));
const { clusters } = useSuperCluster({
points,
bounds,
zoom,
options: { radius: 75, maxZoom: 25 }
});
当我调试时,points我得到类似的东西:

但随后,clusters是空的。我bounds像在视频中一样使用onChange属性进行更新,例如:
onChange={({ zoom, bounds }) => {
setZoom(zoom);
setBounds([
bounds.nw.lng,
bounds.se.lat,
bounds.se.lng,
bounds.nw.lat
]);
}}
那么,我做错了什么?
编辑:
我已经将supercluster对象添加到useSuperCluster()解构中const { clusters, supercluster } = useSuperCluster(...),在调试它之后,我得到了以下对象:
