使用react-leaflet中的MapContainer出现问题：TypeError：无法读取null的属性（读取'useState'）

Question

我正在尝试使用 React Leaflet 在我的网站上添加来自 OpenStreetMap 的地图。语法方面一切似乎都很顺利，但是当我尝试使用时遇到此错误：

未捕获的类型错误：无法读取 null 的属性（读取“useState”） 在 useState (react.development.js:1622:1) 在 MapContainerComponent (MapContainer.js:19:1) 和

react-dom.development.js:18687 上述错误发生在组件中：位于MapContainerComponent (http://localhost:3000/static/js/bundle.js:134734:3)

react.development.js:209 警告：无效的钩子调用。钩子只能在函数组件的主体内部调用。

不确定我应该从哪里开始寻找修复错误。这是我的代码：

import React, {useState} from "react";
import { MapContainer, TileLayer, Marker } from 'react-leaflet';
import osm from './Leaflet/osmprovider';
import "leaflet/dist/leaflet.css";
import '../App.css';

const SOCIAL_LINKS = [
    {   
        name: "Facebook",
        link: "https://www.facebook.com/TESOLintl",
        icon: "facebook-f",
    },
];

function Footer() {
    const ZOOM_LEVEL = 13;
    const center = {
        lat: 14.9221,
        lng: 120.8448
    };
    
    return (
        <div className='Footer'>
            <div className="row">
                
                <div className="col OSM">
                    <MapContainer
                        center={center}
                        zoom={ZOOM_LEVEL}
                        scrollWheelZoom={false}
                    >
                        <TileLayer url={osm.maptiler.url} attribution={osm.maptiler.attribution} />
                        <Marker position={center}></Marker>
                    </MapContainer>
                </div>
                <hr />
            </div>
        
        </div>
    );
    
}

我使用的是react v 18.2.0，react-leaflet是v 4.2.1，我使用的是webpack v 5.0.1

卸载并重新安装也不起作用

Answer 1

我今天遇到了同样的问题，我使用的是react v 18.2.0，react-leaflet是v 4.2.1。迷茫该怎么办。