ASP.NET Core 7结合React.js使用react-leaflet时出现TypeError: Cannot read properties of null (reading 'useState')错误，无法显示地图

我帮你分析下问题所在，然后给出具体的解决步骤：

问题根源 #

你遇到的报错主要有两个原因：

1. CDN导入的上下文问题：直接通过CDN链接导入react-leaflet，可能导致它无法正确访问本地React实例的内部Hook（比如useState），两个模块不在同一个运行上下文里，就会出现"读取null的属性"这类错误。
2. 类组件与Hook的冲突：react-leaflet的核心组件（比如MapContainer）内部依赖React Hooks实现，而Hooks只能在函数组件或自定义Hook中使用，不能直接在类组件的render方法里调用这些组件，这也是触发报错的关键。

解决步骤 #

1. 改用npm安装依赖（放弃CDN导入）

ASP.NET Core + React的项目模板默认用npm管理前端包，用这种方式安装能保证版本兼容，避免上下文问题：

npm install leaflet react-leaflet

同时别忘了导入leaflet的样式文件，否则地图会显示错位或无样式。

2. 调整组件写法

有两种可选方案，根据你的习惯选择：

方案一：把类组件改成函数组件

这是最直接的方式，适配react-leaflet的Hook特性：

import React from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
// 必须导入leaflet的样式
import 'leaflet/dist/leaflet.css';

export function Home() {
  return (
    // 给地图容器设置明确的宽高，否则可能不显示
    <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false} style={{ height: '400px', width: '100%' }}>
      <TileLayer
        attribution='&copy; OpenStreetMap contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={[51.505, -0.09]}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>
  );
}

Home.displayName = 'Home';

方案二：保留类组件，嵌套函数组件封装地图逻辑

如果不想改动现有类组件结构，可以把地图部分封装成独立的函数组件，再在类组件中引用：

import React, { Component } from 'react';
// 先导入leaflet样式
import 'leaflet/dist/leaflet.css';

// 封装独立的地图函数组件
const MapComponent = () => {
  const { MapContainer, TileLayer, Marker, Popup } = require('react-leaflet');
  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false} style={{ height: '400px', width: '100%' }}>
      <TileLayer
        attribution='&copy; OpenStreetMap contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={[51.505, -0.09]}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>
  );
};

export class Home extends Component {
  static displayName = Home.name;

  render() {
    return <MapComponent />;
  }
}

额外注意点 #

• 一定要给MapContainer设置明确的高度和宽度，默认情况下它没有尺寸，会导致地图不显示。
• 安装依赖后，重启一下前端开发服务器，确保新安装的包被正确加载。

备注：内容来源于stack exchange，提问作者KnechtenP99