react-map-gl中更新GeoJSON后旧弹窗残留的Mapbox数据异常问题

问题描述 #

在基于react-map-gl开发的React应用中，通过GeoJSON数据渲染地图图层。更新GeoJSON数据后，新数据能正常显示，但已从GeoJSON中移除的旧数据对应的弹窗仍留在地图上。怀疑是旧弹窗组件未被正确卸载导致，询问解决方法：是否需要手动删除弹窗，或Popup组件有自动处理的属性？同时需要审查提供的图层源码。

提供的源码 #

<Source
  id="tipi"
  type="geojson"
  data={props.tipigeoJson}
  promoteId="id"
  generateId={true}
  key={JSON.stringify(props.tipigeoJson)} // line that update layer every time geojson changes
>
  <Layer
    id="tipi"
    type="symbol"
    layout={{
      "icon-image": "Accident_round",
      "icon-size": ["*", 0.05, iconSize],
    }}
  />
</Source>


{props.tipigeoJson &&
  showPopup &&
  props.tipigeoJson.features.map((feature, index) => {
    
    if (
      feature.properties.score > 3
        &&
        feature.properties.isinfeed === true
    ) {
      return (
        <Popup
          key={index} // Use the index as the key
          longitude={feature.geometry.coordinates[0]}
          latitude={feature.geometry.coordinates[1]}
          offsetTop={[0, -10]}
          closeButton={false}
          closeOnClick={false}
          className="mapboxgl-popup"
        >
              <h3>Accident - tipi</h3>
        </Popup>
      );
    } else {
      return null; 
    }
  })}

核心问题与解决方案 #

1. 弹窗残留的根本原因 #

你用数组index作为Popup组件的key，这是错误的。当GeoJSON中的features被删除或顺序变化时，React无法通过index识别哪些Popup组件应该被卸载——它只会根据index的匹配来更新组件，而非判断feature是否存在，导致已移除的feature对应的弹窗仍保留在DOM中。

解决方法：
将Popup的key替换为feature的唯一标识，比如feature.id（你在Source中设置了promoteId="id"，说明每个feature都有唯一的id字段）：

<Popup
  key={feature.id} // 用feature的唯一id作为key
  // 其他属性不变
>
  <h3>Accident - tipi</h3>
</Popup>

这样React就能准确识别哪些feature被移除，自动卸载对应的Popup组件，不需要手动删除弹窗。

2. Source组件的问题优化 #

• generateId与promoteId冲突：你同时设置了promoteId="id"（指定用feature自身的id作为图层元素标识）和generateId={true}（让mapbox自动生成id），这两个属性互斥，generateId会覆盖promoteId的作用，建议删除generateId={true}。
• key的性能问题：用JSON.stringify(props.tipigeoJson)作为Source的key，当GeoJSON数据量大时，序列化操作会非常耗时，导致组件更新卡顿。建议换成更轻量的更新标识，比如在props中传入一个geoJsonUpdateVersion变量，每次更新GeoJSON时递增这个值，用它作为key：

<Source
  id="tipi"
  type="geojson"
  data={props.tipigeoJson}
  promoteId="id"
  key={props.geoJsonUpdateVersion} // 用更新版本号作为key
>
  {/* Layer内容不变 */}
</Source>

3. 代码逻辑优化 #

你当前的map逻辑中，不满足条件的feature返回null，可以先过滤features再map，代码更清晰：

{props.tipigeoJson &&
  showPopup &&
  props.tipigeoJson.features
    .filter(feature => feature.properties.score > 3 && feature.properties.isinfeed)
    .map(feature => (
      <Popup
        key={feature.id}
        longitude={feature.geometry.coordinates[0]}
        latitude={feature.geometry.coordinates[1]}
        offsetTop={[0, -10]}
        closeButton={false}
        closeOnClick={false}
        className="mapboxgl-popup"
      >
        <h3>Accident - tipi</h3>
      </Popup>
    ))}

总结 #

• 弹窗残留的核心解决方法是用feature的唯一id替换index作为Popup的key，React会自动处理旧弹窗的卸载，不需要手动操作。
• 优化Source组件的属性，删除冲突的generateId，替换性能差的key生成方式。
• 过滤后再map的逻辑让代码更易维护。

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