React类组件触发Leaflet地图flyTo报Invalid hook call错误问询

报错核心原因 #

useLeaflet是React Hook，必须在函数组件的顶层作用域调用，你当前将它写在了类组件的点击事件处理函数中，属于组件渲染流程外的回调，直接触发了React的Hook调用规则校验报错。
类组件场景下无法使用Hook获取地图实例，需要通过react-leaflet官方提供的实例获取逻辑实现交互。

正确实现逻辑 #

1. 利用<Map>组件提供的whenReady回调，在地图实例初始化完成时，将map实例保存到类的实例属性上（无需存入state，避免不必要的组件重渲染）
2. 按钮点击事件触发时，直接读取已保存的map实例，调用flyTo方法完成定位跳转，全程不需要调用Hook
3. 同步修正原代码中的语法问题：
   • 类组件的渲染逻辑需要放在render()方法内，不能直接在类作用域书写return语句
   • JSX标签大小写需匹配：<Map>对应的闭合标签为</Map>，不可小写
   • Web端React的按钮点击事件为onClick，不要误用移动端React Native的onPress事件

修正后完整代码 #

import React from 'react';
// 按实际项目的包引入路径调整Map、TileLayer的引入来源
import { Map, TileLayer } from 'react-leaflet';

// 初始地图中心配置
const initialMapCenter = [40.7128, -74.0060];

export default class App extends React.Component {
  constructor() {
    super();
    // 用于存储地图实例的类属性
    this.mapInstance = null;
    this.onClickNewYork = this.onClickNewYork.bind(this);
    this.handleMapReady = this.handleMapReady.bind(this);
  }

  // 地图初始化完成的回调
  handleMapReady(mapState) {
    // 把地图实例挂载到类属性上，不触发组件重渲染
    this.mapInstance = mapState.target;
  }

  // 按钮点击触发纽约定位
  onClickNewYork() {
    // 做空值判断，避免地图未初始化完成时报错
    if (!this.mapInstance) return;
    // 调用flyTo方法跳转，传入纽约坐标与缩放等级
    this.mapInstance.flyTo([40.730610, -73.935242], 15);
  }

  render() {
    return (
      <>
        <button onClick={this.onClickNewYork}>
          定位到纽约
        </button>
        <Map 
          center={initialMapCenter} 
          zoom={10}
          whenReady={this.handleMapReady}
        >
          <TileLayer
            attribution='&copy; OpenStreetMap contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
        </Map>
      </>
    );
  }
}

关键注意事项 #

• 不要将map实例存入组件state：map是带有DOM引用的非纯对象，存入state会触发不必要的全组件重渲染，挂在类实例属性上是性能最优的方案
• 必须添加空值判断：首次点击按钮时若地图尚未初始化完成，类属性上的mapInstance为null，提前判断可以避免空引用报错
• 若后续将组件重构为函数组件，才可以在函数组件顶层作用域调用useLeaflet获取map实例，依然不能在事件回调、循环、条件判断中调用Hook

内容的提问来源于stack exchange，提问作者KrisH