React Leaflet 标记集群：无效的 Hook 调用

Question

我正在尝试使用这个名为 React Leaflet Markercluster 的库。

我使用React版本18.2.0。当我将代码放入我的应用程序时，我收到这样的错误 “无效的钩子调用。钩子只能在函数组件的主体内部调用。”

这是我从文档示例中复制的代码：

import React from "react";
import { MapContainer, TileLayer, Marker } from "react-leaflet";
import MarkerClusterGroup from "react-leaflet-markercluster";

import "./styles.scss";

export default function DashboardMap() {
    return (
        <MapContainer
            className="markercluster-map"
            center={[51.0, 19.0]}
            zoom={4}
            maxZoom={18}
        >
            <TileLayer
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            />

            {/* Put <MarkerClusterGroup {...props} /> inside react-leaflet after <TileLayer /> */}
            <MarkerClusterGroup>
                <Marker position={[49.8397, 24.0297]} />
                <Marker position={[52.2297, 21.0122]} />
                <Marker position={[51.5074, -0.0901]} />
            </MarkerClusterGroup>
        </MapContainer>
    );
}

你们知道为什么会发生这种情况吗？预先感谢您。

Answer 1

同样，集群适用于react-leaflet < 4.x.x, but in that case, some other features dont work, i found another package: https://npm.io/package/react-leaflet-muster。但它也不起作用。 ;(