react+leaflet中“Map container is already initialized”问题

问题

在写react时使用leaflet出现Map container is already initialized的问题，大致意思就是容器初始化了多次，代码如下：

export default class Create_map extends Component {

    componentDidMount(){
        this.map = L.map('map', {
            minZoom: 3,
            maxZoom: 20,
            center: [30,114],
            zoom: 3,
            zoomControl: false,
            attributionControl: false,
            crs: L.CRS.EPSG4326,
        });
        L.tileLayer(VEC_C, {
            maxZoom: 20,
            tileSize: 256,
            zoomOffset: 1,
        }
        ).addTo(this.map);
        L.tileLayer(CVA_C, {
                maxZoom: 20,
                tileSize: 256,
                zoomOffset: 1,
            }
        ).addTo(this.map);

解决方法

方法一：

在初始化容器前加上如下代码，在初始化之前把之前的容器全给清掉。

var container = L.DomUtil.get('map');
	if(container != null){
	container._leaflet_id = null;
}

这种方法能解决问题，但很显然我自己本来之前就没有写初始化容器的代码，第一次初始化就报错，说明这个初始化被执行了多次，具体原因见方法二
https://github.com/Leaflet/Leaflet/issues/3962

方法二：

这个不是一个普适的方法，是针对我出现这个问题的具体原因和解决方法。
上一节说到初始化被执行多次，经检查，生命周期函数componentDidMount()执行了两次，于是重复初始化的问题就找到了，经网上搜索后，问题就在于react版本更新到18后端index.js里面的<React.StrictMode>，删除<React.StrictMode>后，componentDidMount()就只会执行一次了。

import React from 'react';
import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
    
);

reportWebVitals();

https://blog.csdn.net/m0_58016522/article/details/126425510