带有 Next.js 的 React-Leaflet v4 13 无效的钩子调用

Question

我将 Next.js 版本从 12 更新到 13 后出现问题 - 这也意味着我将 React 从 17 更新到 18，将 React-leaflet 从 3 更新到 4。我有这个组件： `

function ChangeView({ center }) {
    const map = useMap();
    map.setView(center);
    return null;
}
const createClusterCustomIcon = function (cluster) {
    return L.divIcon({
    html: \`<span>${cluster.getChildCount()}</span>\`,
    className: \`${styles.markerClusterCustom}\`,
    iconSize: L.point(40, 40, true),
  });
};

 const RegularMap = ({ center, organizations, cat, org, orgIcon }) => {
const [organization, setOrganization] = useState();
if(center[0] || center [1] !== null  && center.length > 0 ){
    return (
        <MapContainer center={center} zoom={6} className={styles.mapContainer} scrollWheelZoom={true}
                      style={organizations ? {height: 600, width: "100%"} : {height: 400, width: "100%"}} >
            <ChangeView center={center} />
            <TileLayer
                attribution="© <a href='https://www.mapbox.com/about/maps/'>Mapbox</a> © <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> <strong><a href='https://www.mapbox.com/map-feedback/' target='_blank'>Improve this map</a></strong>"
                url="https://api.mapbox.com/styles/v1/freala/ckqtm5ajl6cxr19n2r67a821q/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoiZnJlYWxhIiwiYSI6ImNrcXRtZHR4djA4Nmkyd3F1ZmM2eHBiYnoifQ.uKDqGDSzf88It8iCuX6fJg"
            />
            {org ? <Marker icon={orgIcon ? icon({
                iconUrl: orgIcon,
                iconSize: [32, 32],
            }) : ICON} position={center}> </Marker> : <Marker icon={ICON} position={center}> </Marker>}
            <MarkerClusterGroup  showCoverageOnHover={false}
                                 spiderfyDistanceMultiplier={2} iconCreateFunction={createClusterCustomIcon}>
            {organizations && organizations.length > 0 ? (
                <>
                    {organizations.map( o => {
                        if(o.latitude && o.longitude){
                            let id = o.id;
                            return(
                                <Marker key={o.id} icon={o.icon ? icon({
                                    iconUrl: o.icon.url,
                                    iconSize: [32, 32],
                                }) : ICON} position={[o.latitude, o.longitude]}
                                       >
                                        <Popup>
                                            <h2 className={styles.popupH2}>{o.name}</h2>
                                            <div style={{width:'100%',display:'flex',justifyContent:'center',margin:'5px 0'}}>
                                                <Link href={{ pathname: o.is_organization ? "/organization" : "/location", query: { id: o.id } }}>
                                                    <a  className="details-org">Szczegóły</a>
                                                </Link>
                                                <style jsx>
                                                    {
                                                        \`
                                                          .details-org{
                                                            padding:10px 20px;
                                                            background-color:#517c92;
                                                            color:white !important;
                                                            border-radius:5px;
                                                            text-decoration:none;
                                                          }
                                                          .details-org:hover{
                                                            color:white !important;
                                                          }
                                                        \`
                                                    }
                                                </style>
                                            </div>
                                        </Popup>
                                </Marker>
                            )
                        }
                    })}
                </>
            ) : null}
            </MarkerClusterGroup>
        </MapContainer>
    )
} else return null
};

这是我的依赖：

"dependencies": { "@changey/react-leaflet-markercluster": "^4.0.0-rc1", "@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/free-brands-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/react-fontawesome": "^0.1.16", "ally.js": "^1.4.1", "bootstrap": "^5.1.3", "easy-peasy": "^5.0.4", "i18next": "^21.5.2", "i18next-browser-languagedetector": "^6.1.2", "i18next-http-backend": "^1.3.1", "leaflet": "^1.9.4", "leaflet-defaulticon-compatibility": "^0.1.1", "leaflet-map-server-component": "^0.2.0", "leaflet.markercluster": "^1.5.3", "moment": "^2.29.4", "next": "^13.4.8", "next-share": "^0.22.1", "nprogress": "^0.2.0", "react": "^18.2.0", "react-audio-player": "^0.17.0", "react-bootstrap": "^2.1.2", "react-calendar": "^3.7.0", "react-confirm-alert": "^2.8.0", "react-datepicker": "^4.15.0", "react-dom": "^18.2.0", "react-hook-form": "^7.29.0", "react-i18next": "^11.14.2", "react-leaflet": "^3.2.5", "react-leaflet-markercluster": "^3.0.0-rc1", "react-player": "^2.9.0", "react-select": "^5.3.2", "react-slick": "^0.29.0", "sass": "^1.43.4", "sharp": "^0.32.1", "slick-carousel": "^1.8.1", "swr": "^2.2.0" }

我尝试将传单降级回 v3，但这也失败了，因为它与 React v18 不兼容。我似乎找不到任何人解决了这个问题，当我找到某人时，这是一个不同的问题，与版本更新无关，并且至少有 2 年的历史了。在更新之前，一切似乎都运行良好。

Answer 1

我建议使用包“react-leaflet-cluster”（https://www.npmjs.com/package/react-leaflet-cluster）而不是@changey/react-leaflet-markercluster，我面临着和你一样的问题。所以我决定使用下面的包，令人惊讶的是它在我的旧代码中工作得很好，只需要更改 import 语句，您可能必须根据此包的文档更新您的代码。

从“react-leaflet-cluster”导入MarkerClusterGroup；