React与Apollo新手：谷歌地图标记点击函数报错求助

嘿，我来帮你搞定这个问题！你碰到的TypeError: _this.handleMissionClick is not a function错误，核心原因就是函数的定义位置不对，或者没有正确绑定this的指向，导致组件实例找不到这个函数。咱们一步步来修复：

错误根源分析 #

你提到handleMissionClick函数在render部分和主类外部，这就导致组件的实例对象（也就是this）无法访问到这个函数——类组件的方法必须定义在类内部，才能被this调用；另外就算定义在类里，如果没绑定this，React事件回调里的this也会指向undefined，同样会报这个错。

具体解决方案 #

方案1：把函数移到类内部，并用构造函数绑定this #

这是类组件里最经典的绑定方式，适合需要兼容旧版本React的场景：

import React, { Component } from 'react';
import { GoogleMap, Marker } from '@react-google-maps/api';
import { graphql } from '@apollo/client';

class MissionMap extends Component {
  constructor(props) {
    super(props);
    // 关键：绑定this到当前组件实例
    this.handleMissionClick = this.handleMissionClick.bind(this);
    this.state = {
      selectedMission: null,
      showLayer: false // 用state控制图层显示
    };
  }

  // 把函数移到类内部，作为类的方法
  handleMissionClick(mission) {
    // 这里写你显示图层的逻辑，比如更新state触发图层渲染
    this.setState({
      selectedMission: mission,
      showLayer: true
    });
    console.log('点击了任务:', mission);
  }

  render() {
    // 假设你用Apollo的高阶组件获取到了missions数据
    const { missions } = this.props;

    return (
      <GoogleMap mapContainerStyle={{ width: '100%', height: '80vh' }}>
        {/* 渲染标记，绑定点击事件 */}
        {missions.map(mission => (
          <Marker
            key={mission.id}
            position={{ lat: mission.latitude, lng: mission.longitude }}
            // 这里调用绑定好的函数，传递当前任务数据
            onClick={() => this.handleMissionClick(mission)}
          />
        ))}
        {/* 根据state显示图层组件 */}
        {this.state.showLayer && (
          <YourLayerComponent mission={this.state.selectedMission} />
        )}
      </GoogleMap>
    );
  }
}

// 用Apollo的高阶组件包裹组件，获取missions数据
export default graphql(YOUR_MISSIONS_QUERY)(MissionMap);

方案2：用箭头函数定义类方法（自动绑定this） #

这种方式更简洁，不需要手动在构造函数里绑定this，箭头函数会自动捕获当前类实例的this：

import React, { Component } from 'react';
import { GoogleMap, Marker } from '@react-google-maps/api';
import { graphql } from '@apollo/client';

class MissionMap extends Component {
  // 直接用类字段定义state（需要开启ES7类字段语法）
  state = {
    selectedMission: null,
    showLayer: false
  };

  // 用箭头函数定义方法，自动绑定this
  handleMissionClick = (mission) => {
    this.setState({
      selectedMission: mission,
      showLayer: true
    });
  };

  render() {
    const { missions } = this.props;

    return (
      <GoogleMap mapContainerStyle={{ width: '100%', height: '80vh' }}>
        {missions.map(mission => (
          <Marker
            key={mission.id}
            position={{ lat: mission.latitude, lng: mission.longitude }}
            onClick={() => this.handleMissionClick(mission)}
          />
        ))}
        {this.state.showLayer && <YourLayerComponent mission={this.state.selectedMission} />}
      </GoogleMap>
    );
  }
}

export default graphql(YOUR_MISSIONS_QUERY)(MissionMap);

额外注意点 #

• 不要把handleMissionClick定义在render函数内部——虽然语法上可行，但每次组件渲染都会重新创建这个函数，会带来不必要的性能开销，而且如果函数里用到this，还要额外绑定，得不偿失。
• 确保你的图层组件能正确接收selectedMission数据，并根据这个数据渲染对应的内容。

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