fix(Polyline): fix Polyline props control issue. (#324)

uiwjs · Aug 3, 2023 · 8b249c6 · 8b249c6
1 parent d637f3f
commit 8b249c6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/packages/polyline/README.md b/packages/polyline/README.md
@@ -18,11 +18,15 @@ import { Map, APILoader, Polyline, ToolBarControl } from '@uiw/react-amap';
 
 const Example = () => {
   const [show, setShow] = useState(true);
+  const [color, setColor] = useState('red');
   return (
     <>
       <button onClick={() => setShow(!show)}>
         {show ? '关闭' : '开启'}
       </button>
+      <button onClick={() => setColor(color === 'red' ? 'black' : 'red')}>
+        {color}
+      </button>
       <div style={{ width: '100%', height: '300px' }}>
         <Map zoom={3}>
           <Polyline
@@ -36,7 +40,7 @@ const Example = () => {
             onClick={(obj) => {
               console.log('obj:', obj);
             }}
-            strokeColor="black"
+            strokeColor={color}
             strokeOpacity={1}
             draggable={true}
             onChange={e=>console.log(e)}
@@ -61,6 +65,7 @@ const Example = () => {
           <Polyline
             visiable={show}
             strokeOpacity={1}
+            strokeColor={color}
             path={[
               [121.099109,31.222311],
               [118.528308,31.989555],

diff --git a/packages/polyline/src/usePolyline.tsx b/packages/polyline/src/usePolyline.tsx
@@ -11,7 +11,7 @@ export function usePolyline(props = {} as UsePolyline) {
   const { map } = useMapContext();
   useEffect(() => {
     if (map && !polyline) {
-      let instance: AMap.Polyline = new AMap.Polyline({ ...other });
+      let instance: AMap.Polyline = new AMap.Polyline(other);
       map.add(instance);
       setPolyline(instance);
       return () => {
@@ -28,6 +28,12 @@ export function usePolyline(props = {} as UsePolyline) {
     }
   }, [map]);
 
+  useEffect(() => {
+    if (polyline) {
+      polyline.setOptions(other);
+    }
+  }, [polyline, other]);
+
   useVisiable(polyline!, visiable);
   useSettingProperties<AMap.Polyline, UsePolyline>(polyline!, props, [
     'Path',