修复父组件状态操作使得地图重新加载的问题

README.md

@@ -61,3 +61,7 @@
 #### License
 
     MIT
+
+#### 更新日志
+
+    MIT

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bf-amap",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "MIT",

src/app.jsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { BFAMap } from "./lib/index";
+
+const App = (props) => {
+
+  const [testState, setTestState] = useState(false);
+
+  return ( <>
+    <button onClick={() => {
+      setTestState(!testState);
+    }}>
+      点击
+    </button>
+    <BFAMap
+      id="a_map"
+      map_key={window.AMAP_KEY}
+      options={{
+        zoom: 11,
+        center: [121.498586, 31.239637],
+        viewMode: '3D',
+      }}
+      plugins={['Scale', 'OverView', 'ToolBar',]}
+      setMap={(map, AMap) => {
+        const scale = new AMap.Scale();
+        map.addControl(scale);
+        const tollBar = new AMap.ToolBar();
+        map.addControl(tollBar);
+        console.log(map);
+      }}/>
+  </> )
+};
+
+export default App;

src/index.js

@@ -1,26 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { BFAMap } from "./lib/index";
+import App from "./app";
 
 ReactDOM.render(
   <div style={{ width: '600px', height: '600px' }}>
-    {/* eslint-disable-next-line react/jsx-pascal-case */}
-    <BFAMap
-      id="a_map"
-      map_key={window.AMAP_KEY}
-      options={{
-        zoom: 11,
-        center: [121.498586, 31.239637],
-        viewMode: '3D',
-      }}
-      plugins={['Scale', 'OverView', 'ToolBar',]}
-      setMap={(map, AMap) => {
-        const scale = new AMap.Scale();
-        map.addControl(scale);
-        const tollBar = new AMap.ToolBar();
-        map.addControl(tollBar);
-        console.log(map);
-      }}/>
+    <App/>
   </div>,
   document.getElementById('root')
 );

src/lib/index.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import * as AMapLoader from '@amap/amap-jsapi-loader';
+
 const BFAMap = (props) => {
   const { AMapUI, loca, plugins, setMap, options, id, map_key } = props;
   const map = useRef();
@@ -21,12 +22,10 @@ const BFAMap = (props) => {
     });
   };
   useEffect(() => {
-    if (map.current) {
-      map.current.style.width = '100%';
-      map.current.style.height = '100%';
-      initMap();
-    }
-  });
+    map.current.style.width = '100%';
+    map.current.style.height = '100%';
+    initMap();
+  }, []);
   if (!setMap || typeof setMap !== 'function') return null;
   if (!id) console.error('没有传入唯一ID！，There is no id!');
   if (!map_key) console.error('没有传入key！，There is no map key!');