0

I am using React.js, react-leaflet, and react-leaflet-draw.

The problem I am facing is that I cannot update a React state in the EditStart, EditStop, DeleteStart, and DeleteStop events.

If I call setState in EditStart/DeleteStart, react-leaflet-draw continuously triggers EditStop/DeleteStop events.

I have found a possible solution to my problem, which is to use useRef. However, as we all know, when using useRef, React does not automatically update the component. In my case, I need to manually re-render my component.

I have no idea what I should do. Any suggestions or comments would be greatly appreciated.

const onEditStart = () => {
    isUpdateModeRef.current = true; // *** I can update the ref, but I also need to re-render my component. ***
    setIsUpdateMode(true); // If I call setState, the plugin automatically triggers a stop event.
}

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

<EditControl
  onEditStart={onEditStart}
  onEditStop={onEditStop}
/>
May Olivia
  • 145
  • 1
  • 10
  • Are you able to show more of the code? – ekrall Apr 15 '23 at 12:10
  • Not sure if this is your entire issue, but normally the EditControl component would be wrapped in a FeatureGroup component. See https://github.com/alex3165/react-leaflet-draw. It is a little hard to tell what is intended here without seeing more of the code – ekrall Apr 15 '23 at 12:36

0 Answers0