使用map函数在react-google-maps中加载多个Marker失败求助

我一眼就看出了问题所在——你踩了React状态管理的典型误区，导致动态生成的Marker根本没触发组件更新。下面给你拆解问题和修复方案：

核心问题分析 #

1. 全局变量无法触发React重渲染
   你用了全局的dataArr来存储标记数据，当你在setData里给它赋值时，React完全感知不到这个变量的变化，自然不会重新渲染Map组件，动态Marker也就不会显示。

2. 手动调用组件函数是错误操作
   Map()这种手动调用组件函数的方式完全不符合React的渲染逻辑，React组件的渲染和更新是由框架通过状态/Props变化自动触发的，不是手动调用函数就能生效的。

修复后的完整代码 #

import React, { useEffect, useState } from "react";
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps";

// 改造Map组件，通过Props接收标记数据
const Map = ({ markers }) => {
  return (
    <GoogleMap defaultZoom={8} defaultCenter={{ lat: -34.397, lng: 150.644 }}>
      {/* 硬编码的测试Marker */}
      <Marker position={{ lat: -34.397, lng: 150.644 }} />
      <Marker position={{ lat: -35.397, lng: 151.644 }} />
      
      {/* 动态渲染Marker，依赖Props传递的markers */}
      {markers.map((el) => (
        // 尽量用唯一ID当key，别用索引（如果数据里有id的话）
        <Marker key={el.id || el.lat + el.lng} position={{ lat: el.lat, lng: el.lng }} />
      ))}
    </GoogleMap>
  );
};

// 包装组件时确保Props能传递到内部Map组件
const WrapperMap = withScriptjs(withGoogleMap(Map));

const MapComp = (props) => {
  // 用React状态管理标记数据，确保数据变化时触发重渲染
  const [markers, setMarkers] = useState([]);

  useEffect(() => {
    // 当父组件传递的results变化时，更新本地状态
    if (props.results?.length) {
      // 额外检查：确保经纬度是数字类型（如果后端返回字符串要转译）
      const validMarkers = props.results.map(item => ({
        ...item,
        lat: Number(item.lat),
        lng: Number(item.lng)
      }));
      setMarkers(validMarkers);
    }
  }, [props.results]);

  return (
    <div>
      <WrapperMap
        googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyAduxOyZEAyoz4mLWTgTobz_7lfDNoc-_I"
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `400px` }} />}
        mapElement={<div style={{ height: `100%` }} />}
        // 把标记数据传递给内部Map组件
        markers={markers}
      />
    </div>
  );
};

export default MapComp;

关键修改点说明 #

• 用React状态替代全局变量：通过useState管理标记数据，数据变化时React会自动触发组件重渲染。
• 通过Props传递数据：让Map组件从外部接收标记数据，符合React的单向数据流原则。
• 添加数据合法性检查：确保经纬度是数字类型（很多时候后端会返回字符串格式的坐标，这会导致Marker不显示）。
• 优化Key值：避免用数组索引作为Key，改用坐标组合或数据自带的唯一ID，提升列表渲染性能。

内容的提问来源于stack exchange，提问作者M Hamza Zahid