React中使用MapView渲染出两个相同地图的原因是什么？

原因分析 #

你看到的esri-view-root-storage是ArcGIS JS API用于离线存储功能的容器元素，默认情况下这个元素会被API的CSS样式隐藏，不会显示地图内容。出现两个可见地图的核心原因是未正确引入ArcGIS JS API的官方样式文件，导致esri-view-root-storage失去隐藏样式，进而渲染出重复的地图视图。

解决步骤 #

1. 引入ArcGIS官方样式
   在项目入口文件（比如index.html）中添加对应版本的ArcGIS样式链接，示例：

   <link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css">
   

   注意替换链接中的版本号为你实际使用的ArcGIS JS API版本。

2. 清理组件卸载时的视图实例（可选但推荐）
   为避免React组件卸载时出现内存泄漏，在useEffect的清理函数中销毁MapView实例，同时给地图容器设置宽高样式确保正常显示：

   export const App = () => {
     useEffect(() => {
       const view = new MapView({
         map: new Map({ basemap: "arcgis-community"}),
         container: "map",
         center: [137.8239,36.2068],
         zoom: 5,
       });
   
       // 组件卸载时销毁视图
       return () => {
         view?.destroy();
       };
     }, [])
     
     return (
       <div className="App">
         <div id='map' style={{ width: '100vw', height: '100vh' }}></div>
       </div>
     )
   }
   

内容的提问来源于stack exchange，提问作者Farid