升级Next.js13/React18/react-leaflet4后出现无效Hook调用问题

将Next.js从12升级到13后，同步完成React 17→18、react-leaflet 3→4的升级，地图组件功能异常。升级前一切正常，尝试将react-leaflet降级回v3，但该版本与React 18不兼容，仍会报错。找不到适配本次版本升级场景的解决方案，已搜索到的相关问题均与版本升级无关，且至少是2年前的内容。

地图组件代码 #

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" 
}

内容的提问来源于stack exchange，提问作者Aleksander Kryś