React-Leaflet基于Context动态生成Polyline时更新异常问题求助

1. 初始ref方案不触发useEffect的原因 #

• React 中 ref 及其 current 属性的变更不会被纳入 React 状态变更监听体系，useEffect 无法感知到 ref 的变化，所以绑定 ref 为依赖项的副作用函数不会执行，Polyline 自然不会重绘。

2. 改state后滞后一次的原因 #

• React 的 setState 是异步批量更新的，在同一个事件回调中执行 setState 后立即读取 state 拿到的还是更新前的值，如果此时直接把这个值传给 Context 的更新方法，Context 里存的就是上一次的旧数据，导致渲染滞后。
• 另一个高频原因是更新 Context 中的 lines 数组时没有返回全新的数组引用，而是直接修改了原数组（比如用 push 方法修改原数组后再直接set回去），React 状态更新用浅比较判断是否需要触发重渲染，引用不变的情况下即使值变了也不会通知消费者组件更新。

方案1：统一数据源，仅使用Context存储点位（推荐） #

删除本地冗余的点位state/ref，所有点位的增删改操作直接调用Context的更新方法，Map组件仅监听Context中的lines数据渲染Polyline，从根源避免多份数据不同步问题。
注意Context更新时必须基于前一次状态返回全新数组：

// 绘制区域Context的Provider逻辑
const DrawAreaProvider = ({ children }) => {
  const [lines, setLines] = useState([])

  const addPoint = useCallback((point) => {
    // 基于prev参数更新，永远返回新数组
    setLines(prev => [...prev, point])
  }, [])

  const clearLines = useCallback(() => {
    setLines([])
  }, [])

  return (
    <DrawAreaContext.Provider value={{ lines, addPoint, clearLines }}>
      {children}
    </DrawAreaContext.Provider>
  )
}

点击地图的回调直接调用Context的addPoint方法即可，不需要维护本地状态。

方案2：本地state与Context异步同步 #

如果业务逻辑必须在本地保留一份点位状态，不要在同一个点击回调里同时更新本地state和Context，单独用useEffect监听本地state的变更，待state更新完成后再同步到Context：

// 地图组件内逻辑
const { updateContextLines } = useContext(DrawAreaContext)
const [localPoints, setLocalPoints] = useState([])

// 监听本地state变更，同步到Context
useEffect(() => {
  updateContextLines(localPoints)
}, [localPoints, updateContextLines])

// 地图点击回调仅更新本地state
const handleMapClick = (e) => {
  const newPoint = [e.lngLat.lng, e.lngLat.lat]
  setLocalPoints(prev => [...prev, newPoint])
}

方案3：强制Polyline组件重绘（兜底） #

如果是使用的地图封装库本身的Polyline组件存在更新不生效的问题，可以给Polyline绑定一个动态key，只要点位变化key就改变，React会直接销毁旧组件渲染新组件，绕过更新检测：

// Map组件内渲染Polyline的逻辑
const { lines } = useContext(DrawAreaContext)

return (
  <Map>
    <Polyline
      key={`polyline-${lines.length}-${Date.now()}`}
      path={lines}
      strokeColor="#1890ff"
      strokeWeight={2}
    />
  </Map>
)

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