React useState在OpenLayers要素切换时不生效问题

我在使用OpenLayers开发React应用时，遇到了useState状态不更新的问题：封装OpenLayers的子组件MapWrapper通过pointermove监听鼠标悬停要素并传递给父组件OlMap，但父组件调用setSelectedFeature时状态始终无法更新。

组件逻辑与代码 #

MapWrapper（子组件） #

负责封装OpenLayers地图，通过pointermove监听器实时检测鼠标位置的要素，再通过props.onHoverFeature传递给父组件。

关键监听代码：

initialMap.on('pointermove', function (e) {
  let newSelectedFeature = null

  initialMap.forEachFeatureAtPixel(e.pixel, function (f) {
    newSelectedFeature = f;
    console.log("HOVER", newSelectedFeature)
    return true;
  });
  
  props.onHoverFeature(newSelectedFeature)
});

完整组件代码：

// react
import React, { useState, useEffect, useRef } from 'react';

// openlayers
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import XYZ from 'ol/source/XYZ'
import {transform} from 'ol/proj'
import {toStringXY} from 'ol/coordinate';
import OSM, {ATTRIBUTION} from 'ol/source/OSM.js';

//css
import "./MapStyle.css"
import { Feature } from 'ol';
import { Point } from 'ol/geom';
import Style from 'ol/style/Style';
import Icon from 'ol/style/Icon';

function MapWrapper(props) {

  // set intial state
  const [ map, setMap ] = useState()
  const [ featuresLayer, setFeaturesLayer ] = useState()
  const [ selectedCoord , setSelectedCoord ] = useState()

  const [ selectedFeature, setSelectedFeature ] = useState(null)

  // pull refs
  const mapElement = useRef()
  
  // create state ref that can be accessed in OpenLayers onclick callback function
  const mapRef = useRef()
  mapRef.current = map

  const highlightStyle = new Style({
    image: new Icon({
      src: "https://i.imgur.com/gbfpoiQ.png",
      anchor: [0.5, 1]
    })
  })

  const markerStandardStyle = new Style({
    image: new Icon({
      src: "https://i.imgur.com/GJ8XUQ7.png",
      anchor: [0.5, 1]
    })
  })

  const changeSelectedFeature = (f) => {
    setSelectedFeature(f)
  }

  // initialize map on first render
  useEffect( () => {

    // create and add vector source layer
    const initalFeaturesLayer = new VectorLayer({
      source: new VectorSource(),
      style: markerStandardStyle
    })

    // create map
    const initialMap = new Map({
      target: mapElement.current,
      layers: [
        new TileLayer({
            source: new OSM(),
        }),
        initalFeaturesLayer        
      ],
      view: new View({
        projection: 'EPSG:3857',
        center: [1877145.5647310177, 5030935.7155071795],
        zoom: 14
      }),
      controls: []
    })

    // set map onclick handler
    initialMap.on('click', handleMapClick)

    initialMap.on('pointermove', function (e) {
      let newSelectedFeature = null
    
      initialMap.forEachFeatureAtPixel(e.pixel, function (f) {
        newSelectedFeature = f;
        console.log("HOVER", newSelectedFeature)
        return true;
      });
      
      props.onHoverFeature(newSelectedFeature)
    });

    // save map and vector layer references to state
    setMap(initialMap)
    setFeaturesLayer(initalFeaturesLayer)

  },[])

  // update map if features prop changes
  useEffect( () => {

    if (props.features.length) { // may be null on first render

      // set features to map
      featuresLayer.setSource(
        new VectorSource({
          features: props.features // make sure features is an array
        })
      )

    }

  },[props.features])

  // map click handler
  const handleMapClick = (event) => {

    // get clicked coordinate using mapRef to access current React state inside OpenLayers callback
    const clickedCoord = mapRef.current.getCoordinateFromPixel(event.pixel);

    console.log(clickedCoord)
    props.onClickMap(clickedCoord)

    // transform coord to EPSG 4326 standard Lat Long
    const transormedCoord = transform(clickedCoord, 'EPSG:3857', 'EPSG:4326')

    // set React state
    setSelectedCoord( transormedCoord )

    console.log(transormedCoord)
    
  }

  // render component
  return (      
    <div ref={mapElement} className="map-container"></div>
  ) 

}

export default MapWrapper

OlMap（父组件） #

通过onHoverFeature接收子组件传递的要素，尝试更新selectedFeature状态但未生效：

import React, { useEffect, useState } from 'react'
import MapWrapper from './MapWrapper'
import MapSearchBar from './MapSearchBar'
import SideSlider from './components/SideSlider'

import { Feature } from 'ol';
import { Point } from 'ol/geom';
import Style from 'ol/style/Style';
import Icon from 'ol/style/Icon';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';

export default function OlMap(props) {

    const [showRightSlider, setShowRightSlider] = useState(true)
    const [coordsToShow, setCoordsToShow] = useState([0,0])
    const [features, setFeatures] = useState([])
    const [selectedFeature, setSelectedFeature] = useState(null)

    const highlightStyle = new Style({
        image: new Icon({
          src: "https://i.imgur.com/gbfpoiQ.png",
          anchor: [0.5, 1]
        })
      })

    const onClickMap = (coord) => {
        setShowRightSlider(true);
        setCoordsToShow(coord)
        createMarker("TEST", coord)
    }

    const onHoverFeature = (f) => {
        if(f?.ol_uid === selectedFeature?.ol_uid) {
            return
        }
        if(selectedFeature) {
            selectedFeature.setStyle(undefined)
        }
        if(f){
            f.setStyle(highlightStyle)
        }
        setSelectedFeature(f)
    }

    let idFeature = 0

    //create marker
    const createMarker = (name, coord) => {
        console.log(name, coord)

          const marker =  new Feature({
             geometry:  new Point(coord),
             name: name,
             id: idFeature++
          })

        setFeatures(oldFeature =>  [...oldFeature, marker])
    }

    return(
        <div style={{height: "90%", width: "100%", backgroundColor: "yellow", position: "relative"}}>
            <SideSlider show={showRightSlider} coord={coordsToShow} onClose={() => {setShowRightSlider(false)}}></SideSlider>
            <MapSearchBar></MapSearchBar>
            <MapWrapper features={features} onClickMap={onClickMap} onHoverFeature={onHoverFeature} /*selectedFeature={selectedFeature}*/ />
        </div>
    )
}

问题原因与解决方法 #

核心问题 #

1. 闭包捕获旧状态：onHoverFeature在组件初始化时被传递给子组件，闭包捕获了当时的selectedFeature初始值，后续触发时始终访问旧状态，导致状态对比逻辑失效。
2. 高频事件触发：pointermove事件触发频率极高，频繁的状态更新会被React合并或忽略，导致状态不生效。

解决方案 #

方案1：用useRef保存最新状态

通过useRef同步状态的最新值，避免闭包捕获旧数据：

export default function OlMap(props) {
    // ...其他状态
    const [selectedFeature, setSelectedFeature] = useState(null)
    const selectedFeatureRef = useRef(null)

    // 同步ref与state
    useEffect(() => {
        selectedFeatureRef.current = selectedFeature
    }, [selectedFeature])

    const onHoverFeature = (f) => {
        // 用ref获取最新状态
        if(f?.ol_uid === selectedFeatureRef.current?.ol_uid) {
            return
        }
        if(selectedFeatureRef.current) {
            selectedFeatureRef.current.setStyle(undefined)
        }
        if(f){
            f.setStyle(highlightStyle)
        }
        setSelectedFeature(f)
    }

    // ...其余代码不变
}

方案2：使用函数式更新

通过setSelectedFeature的函数式更新，确保基于最新状态操作：

const onHoverFeature = (f) => {
    setSelectedFeature(prev => {
        if(f?.ol_uid === prev?.ol_uid) {
            return prev
        }
        if(prev) {
            prev.setStyle(undefined)
        }
        if(f){
            f.setStyle(highlightStyle)
        }
        return f
    })
}

额外优化：防抖pointermove事件

降低事件触发频率，避免频繁状态更新：

// 自定义防抖函数
const debounce = (func, delay) => {
    let timer;
    return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => func.apply(this, args), delay);
    };
}

// 在MapWrapper的useEffect中修改监听
useEffect(() => {
    // ...初始化地图代码

    const debouncedHoverHandler = debounce((e) => {
        let newSelectedFeature = null
        initialMap.forEachFeatureAtPixel(e.pixel, function (f) {
            newSelectedFeature = f;
            console.log("HOVER", newSelectedFeature)
            return true;
        });
        props.onHoverFeature(newSelectedFeature)
    }, 100) // 100ms防抖间隔

    initialMap.on('pointermove', debouncedHoverHandler)

    // 组件卸载时清理事件
    return () => {
        initialMap.un('pointermove', debouncedHoverHandler)
    }
}, [])

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