如何在 Openlayers 事件侦听器回调中访问更新的 useState答案

【问题标题】：How to access updated useState in Openlayers event listener callback如何在 Openlayers 事件侦听器回调中访问更新的 useState
【发布时间】：2022-01-31 20:16:36
【问题描述】：

如何在 Openlayers 事件侦听器回调函数中访问更新后的 useState 值？

select.getFeatures().on(['add'], selectAddCallback);

此处示例：https://stackblitz.com/edit/react-ts-zs4uvs?file=Map.tsx

单击按钮，它将向列表中添加一个项目。然后我使用 useEffect 取消设置和重置回调函数，但 useState 列表仍然是原始的空列表，而不是更新的列表

  useEffect(() => {
     select.getFeatures().un(['add'], selectAddCallback);
     select.getFeatures().on(['add'], selectAddCallback);
  }, [mapLayers]);

【问题讨论】：

标签： reactjs openlayers use-effect use-state openlayers-6

【解决方案1】：

您在每次渲染上重新创建 Select 交互组件，这就是您丢失处理程序的原因。将其移出组件可以解决您的问题。

我还建议你看看https://github.com/mmomtchev/rlayers（我是作者），而不是试图重新发明轮子。我已经花了很多时间来解决这些问题。

import React, { useRef, useState, useEffect } from 'react';
import Map from 'ol/Map';
import View from 'ol/View';
import OlLayerTile from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import Select from 'ol/interaction/Select';
import OlGeoJSON from 'ol/format/GeoJSON';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import './style.css';

const initLayers = [
  new OlLayerTile({
    source: new XYZ({
      url: 'http://mt0.google.com/vt/lyrs=s&hl=en&x={x}&y={y}&z={z}',
    }),
  }),
];

const select = new Select({
  hitTolerance: 4,
});

export default () => {
  const mapElement = useRef<HTMLDivElement | null>(null);
  const [map, setMap] = useState<Map | undefined>();
  const [mapLayers, setMapLayers] = useState<string[]>([]);

  useEffect(() => {
    const newMap = initMap(mapElement);

    newMap.addInteraction(select);

    const geojson = {
      type: 'Polygon',
      coordinates: [
        [
          [30.0, 10.0],
          [40.0, 40.0],
          [20.0, 40.0],
          [10.0, 20.0],
          [30.0, 10.0],
        ],
      ],
    };
    let format = new OlGeoJSON();
    let features = format.readFeatures(geojson);
    let source = new VectorSource({
      features: features,
    });
    let layer = new VectorLayer({
      source: source,
    });

    newMap.addLayer(layer);

    setMap(newMap);
  }, []);
  function initMap(
    mapElement: React.MutableRefObject<HTMLDivElement | null>
  ): Map | undefined {
    if (!mapElement.current) return;

    const view = new View({
      projection: 'EPSG:4326',
      center: [30.0, 10.0],
      zoom: 3,
    });

    const map = new Map({
      layers: initLayers,
      view: view,
      controls: [],
    });
    map.setTarget(mapElement.current);
    return map;
  }
  useEffect(() => {
    console.log('Map Layer Change:', mapLayers);
    select.getFeatures().un(['add'], selectAddCallback);
    select.getFeatures().on(['add'], selectAddCallback);
  }, [mapLayers]);

  const handleClick = () => {
    setMapLayers((prevList) => [...prevList, 'New Item']);
  };

  const selectAddCallback = () => {
    console.log('Select Callback');
    console.log(mapLayers);
  };
  return (
    <div className="container">
      <div id="Map-provider" ref={mapElement} className="map" />
      <button className="button" onClick={handleClick}>
        Add
      </button>
    </div>
  );
};

【讨论】：