React集成Google Maps时传递index给onMarkerClick函数报错求助

你遇到的核心问题是参数传递顺序不匹配导致的报错，我来帮你梳理清楚问题和修复方案：

问题根源 #

你的onMarkerClick函数定义期望接收props、marker、e、index四个参数，但在Marker组件的onClick事件里，你只传递了index，完全没接住Google Maps Marker组件原本会自动传递的前三个核心参数。这就导致函数里的props、marker、e都变成了undefined，进而引发后续状态更新或逻辑执行的报错。

修复方案 #

你需要在onClick的箭头函数里，先接收Marker组件自带的props、marker、e参数，再把它们和index一起传给onMarkerClick，保证参数顺序完全对应：

修改后的完整代码片段 #

export class MapContainer extends Component {
  onMarkerClick = (props, marker, e, index) => {
    this.setState({
      defaultAnimation: null,
      showingInfoWindow: true,
      activeMarker: marker,
      selectedPlace: props
      // 现在你可以在这里正常使用index参数做自定义逻辑了
    });
  }

  render() {
    return (
      {/* 记得包裹在GoogleMap容器内，示例如下 */}
      <GoogleMap
        defaultZoom={14}
        defaultCenter={/* 你的地图中心点坐标 */}
      >
        {this.state.AddressListMarkers.map((markerItem, index) => (
          <Marker
            key={index}
            {/* 关键修改：先接收Marker原生参数，再传递index */}
            onClick={(props, marker, e) => this.onMarkerClick(props, marker, e, index)}
            {/* 不要忘记添加Marker的核心属性，比如位置 */}
            position={markerItem.position}
          />
        ))}
      </GoogleMap>
    )
  }
}

额外小建议 #

• 尽量不要用index作为key的取值，如果你的AddressListMarkers数组里的每个标记有唯一标识（比如id），用这个唯一值当key会让组件渲染更稳定。
• 如果你的业务逻辑不需要props、marker、e这些参数，也可以调整函数定义的参数顺序，把index放在第一位，但通常这些参数在处理Marker交互时会用到，保留完整参数会更灵活。

内容的提问来源于stack exchange，提问作者Reynier Téllez