I wanna update the component and change the lines.
When I try to send new props with coordinates, old coordinates also staying.
const PolylineDecorator = withLeaflet(props => {
const { positions } = props;
const polyRef = useRef();
useEffect(() => {
const polyline = polyRef.current.leafletElement; //get native Leaflet polyline
const { map } = polyRef.current.props.leaflet; //get native Leaflet map
L.polylineDecorator(polyline, {
patterns: props.patterns,
}).addTo(map);
}, []);
return <Polyline ref={polyRef} {...props} opacity="0" />;
});
It is tricky to debug this one out without trying in the local machine. But It looks like you need to pass positions
to the useEffect
as follows, so it will re-render every time positions are changing.
useEffect(() => {
const polyline = polyRef.current.leafletElement; //get native Leaflet
polyline
const { map } = polyRef.current.props.leaflet; //get native Leaflet map
L.polylineDecorator(polyline, {
patterns: props.patterns,
}).addTo(map);
}, [positions]);