使用方法 setPaths 的问题（Leaflet PolylineDecorator）

Question

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" />;
});

Answer 1

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]);