CODEWITHSUNDEEP
leafletreact-leafletreact-leaflet-v3react-leaflet-drawreact-leaflet-v4
Shwe
Shwe

Reputation: 165

Can't use react setState in EditStart, EditStop, DeleteStart and DeleteStop event from react-leaflet-draw

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}
/>

Upvotes: 0

Views: 154

Answers (0)

Related Questions