使用i18n更改语言时，使用react-leaflet实时更新工具提示

Question

由于react-leaflet，我目前正在显示带有GeoJSON组件的Map。我还在悬停在某些国家和城市上显示一些工具提示（例如，当我将鼠标悬停在法国时，工具提示显示为“法国”）。我也正在使用i18n进行国际化。国际化对于国家/地区的工具提示工作正常，它们会实时更新。

我具有功能updateDisplay，可在缩放时在国家的GeoJson组件或城市的标记列表之间切换。

问题是，当我切换语言时，它适用于整个页面，但不适用于城市工具提示。仅当我缩放时才会更新它们（因此，当调用updateDisplay时）。

我会有预期的行为：无论缩放如何，我都希望在切换语言时实时更新城市工具提示。

我希望我已经说清楚了>

这是我的代码：

/**
 * Display a Leaflet Map, containing a GeoJson object, or a list of Markers, depending on the zoom
 */
export default function CustomMap(): ReactElement {
  const { t }: { t: TFunction } = useTranslation();

  const countryToString = (countries: string[]): string => countries.map(c => t(c)).join(", ");


  // Contains the json containing the polygons of the countries
  const data: geojson.FeatureCollection = geoJsonData as geojson.FeatureCollection;
  let geoJson: JSX.Element = <GeoJSON
    key='my-geojson'
    data={data}
    style={() => ({
      color: '#4a83ec',
      weight: 1,
      fillColor: "#1a1d62",
      fillOpacity: 0.25,
    })}
    onEachFeature={(feature: geojson.Feature<geojson.GeometryObject>, layer: Layer) => {
      layer.on({
        'mouseover': (e: LeafletMouseEvent) => {
          const country = countries[e.target.feature.properties.adm0_a3];
          layer.bindTooltip(countryToString(country.tooltip as string[]));
          layer.openTooltip(country.latlng);
        },
        'mouseout': () => {
          layer.unbindTooltip();
          layer.closeTooltip();
        },
      });
    }}
  />

  // Contains a list of marker for the cities
  const cityMarkers: JSX.Element[] = cities.map(
    (
      c: position,
      i: number
    ) => {
      return (
        // Here are the tooltips that doesn't update in real time, when we switch language
        // FIX ME
        <Marker key={c.latlng.lat + c.latlng.lng} position={c.latlng}>
          <Tooltip>{t(c.tooltip as string)}</Tooltip>
        </Marker>
      );
    }
  );

  const [state, setState] = useState<state>({
    zoom: 3,
    display: geoJson,
  });


  // Update on zoom change
  function onZoom(e: LeafletMouseEvent): void {
    const zoom = e.target._zoom;
    const newDisplay = updateDisplay(zoom);
    setState({
      ...state,
      zoom,
      display: newDisplay,
    });
  }

  // Called on every zoom change, in order to display either the GeoJson, or the cities Marker
  function updateDisplay(zoom: number): Marker[] | any {
    if (zoom >= 4) {
      return cityMarkers;
    } else {
      return geoJson;
    }
  }


  return (
    <Map
      style={{ height: "500px" }}
      center={[54.370138916189596, -29.918133437500003]}
      zoom={state.zoom}
      onZoomend={onZoom}
    >
      <TileLayer url="https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw" />
      {state.display}
    </Map>
  );
}
您也可以在这里查看它：https://github.com/TheTisiboth/WebCV/blob/WIP/src/components/customMap.tsx它在分支WIP

由于react-leaflet，我目前正在显示带有GeoJSON组件的Map。我还显示了一些悬停在某些国家和城市上的工具提示（例如，当我将鼠标悬停在法国时，......>

Answer 1

您可以执行以下操作来解决此问题：

1. 如果添加了标记，则创建一个布尔标志以保留在内存中