react-leaflet-draw中Edit/Delete事件无法调用setState的问题求助

问题根源 #

当你在EditStart/DeleteStart回调中直接调用setState时，React状态更新会触发组件重渲染，导致react-leaflet-draw的EditControl被重新初始化，进而意外触发EditStop/DeleteStop事件。而useRef虽能保存状态但无法触发重渲染，无法满足你的需求。

下面提供几种可行的解决方案：

方案一：将EditControl封装为Memoized组件 #

通过React.memo缓存EditControl组件，避免父组件状态变化时重新渲染它，同时用useCallback稳定事件回调的引用，防止不必要的重渲染。

import React, { useState, useCallback, memo } from 'react';
import { EditControl } from 'react-leaflet-draw';

// 封装Memoized的EditControl
const MemoizedEditControl = memo(({ onEditStart, onEditStop }) => (
  <EditControl
    onEditStart={onEditStart}
    onEditStop={onEditStop}
    // 这里添加你的其他EditControl配置项，比如draw、edit等
  />
));

// 父组件
const YourMapComponent = () => {
  const [isUpdateMode, setIsUpdateMode] = useState(false);

  // 用useCallback稳定回调引用
  const onEditStart = useCallback(() => {
    setIsUpdateMode(true);
  }, []);

  const onEditStop = useCallback(() => {
    setIsUpdateMode(false);
  }, []);

  return (
    <div>
      {/* 你的其他地图组件内容 */}
      <MemoizedEditControl 
        onEditStart={onEditStart} 
        onEditStop={onEditStop} 
      />
    </div>
  );
};

方案二：延迟状态更新到事件循环末尾 #

利用setTimeout将状态更新推迟到插件事件流程完成后执行，避免状态更新打断插件的事件触发逻辑。

const onEditStart = () => {
  isUpdateModeRef.current = true;
  // 延迟到事件循环下一轮执行状态更新
  setTimeout(() => {
    setIsUpdateMode(true);
  }, 0);
};

const onEditStop = () => {
  isUpdateModeRef.current = false;
  setTimeout(() => {
    setIsUpdateMode(false);
  }, 0);
};

方案三：结合useRef和手动触发重渲染 #

通过一个空的useState实现手动重渲染，既保留useRef的状态存储，又能触发组件更新。

import { useState, useRef } from 'react';

const YourMapComponent = () => {
  const isUpdateModeRef = useRef(false);
  // 用空状态实现forceUpdate
  const [, forceUpdate] = useState();

  const onEditStart = () => {
    isUpdateModeRef.current = true;
    // 手动触发重渲染
    forceUpdate();
  };

  const onEditStop = () => {
    isUpdateModeRef.current = false;
    forceUpdate();
  };

  // 组件中使用isUpdateModeRef.current获取状态
  return (
    <div>
      {/* 你的地图和EditControl组件 */}
      <EditControl
        onEditStart={onEditStart}
        onEditStop={onEditStop}
      />
    </div>
  );
};

推荐优先使用方案一，它从根源上避免了组件不必要的重渲染，是最符合React设计理念的解决方案。

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