React Context字典无法即时更新问题求助

核心原因 #

React中useReducer的dispatch是异步更新状态的。调用AddFeatureToSelection本质是触发dispatch，此时状态不会立刻改变，所以紧接着打印FeatureSelectionTracker拿到的还是更新前的旧值。状态更新会在当前代码执行完毕后，由React批量处理并重新渲染组件，此时才能拿到新状态。

解决方案 #

1. 用useEffect监听状态变化

在使用Context的组件中，通过useEffect监听FeatureSelectionTracker的变化，当状态更新后自动执行打印或后续逻辑：

import React, { useContext, useEffect } from 'react';
import mapViewEventContext from './mapview-context';

function YourComponent() {
  const { AddFeatureToSelection, FeatureSelectionTracker } = useContext(mapViewEventContext);

  // 监听状态变化，更新后执行
  useEffect(() => {
    console.log('更新后的FeatureSelectionTracker:', FeatureSelectionTracker);
    // 这里可以写需要在状态更新后执行的逻辑
  }, [FeatureSelectionTracker]); // 依赖项为状态本身

  const handleAddFeature = (newFeature, layer) => {
    AddFeatureToSelection(newFeature, layer);
    // 不要在这里直接打印，此时状态还未更新
  };

  return (
    <button onClick={() => handleAddFeature(/* 传入你的feature和layer */)}>
      添加特征
    </button>
  );
}

2. 放弃同步获取更新的预期

不要期望调用AddFeatureToSelection后立刻拿到新状态，所有依赖新状态的逻辑都应该放在状态更新后的生命周期中（比如useEffect），或者通过组件重新渲染后自动读取新状态。

额外代码优化提示（非核心问题） #

你的RemoveFromSelection逻辑中，splice的使用有误：

// 原代码
featuresArray = featuresArray.splice(indexOfFtr);
newArray[lyr.layerId] = featuresArray;

splice(index)会删除从index开始到数组末尾的所有元素，并返回这些被删除的元素，这会导致你把删除的元素重新赋值给newArray[lyr.layerId]，正确写法应该是删除指定索引的单个元素：

// 修改后
featuresArray.splice(indexOfFtr, 1); // 第二个参数1表示只删除1个元素
newArray[lyr.layerId] = featuresArray;

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