关闭Leaflet自定义Popup时对应的context状态未重置是什么原因？

问题原因 #

1. 状态更新的异步特性 #

React 中所有状态更新操作都是异步批量执行的，你调用setTravelTime([])后，当前函数作用域内获取到的travelTime依旧是本次渲染周期的旧值，需要等到下一次重渲染才会拿到更新后的值。所以你在调用后立刻检查数组，拿到的还是旧的非空值，属于正常现象，不代表更新逻辑没有触发。

2. 组件提前卸载导致更新丢失 #

你的组件渲染条件为travelTime.length > 0时才渲染弹窗，同时你在handleClose中优先执行了setShowMapLayerPopup(false)，如果该状态控制的是当前组件的上层容器显隐，会直接导致TravelTimesPopup组件被提前卸载，后续的setTravelTime([])更新会被 React 直接丢弃，不会实际执行。

解决方案 #

1. 调整状态更新顺序，先执行数据清空、图层清理操作，最后再关闭弹窗，避免组件提前卸载导致更新丢失：

function handleClose() {
    if (travelTime.length > 0) setTravelTime([]);
    mapCircle.clearLayers();
    // 最后执行弹窗关闭操作
    setShowMapLayerPopup(false);
}

2. 若需要验证状态是否更新成功，不要在setter调用后立刻检查，通过useEffect监听状态变化确认：

useEffect(() => {
  // 此处可以拿到最新的travelTime值
  console.log('travelTime已更新', travelTime)
}, [travelTime])

3. 额外排查点：确认useAppContext中导出的setTravelTime是原生useState返回的更新函数，没有被额外封装的逻辑拦截空数组的更新操作。

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