使用 React useEffect 钩子更改 tileLayer

如何解决使用 React useEffect 钩子更改 tileLayer

我正在尝试使用 React 的 useEffect 钩子更改 tileLayer。当从 DarkMode 切换到 LightMode 主题时停止，从而将 tileLayer 更改为 Dark，反之亦然。

我已经阅读了数百页并尝试了许多替代方法，但它根本不起作用。有人可以帮我吗？

React Leaf v3.2.0

import React,{ useState,useEffect,useContext } from "react";
import { Grid } from "@material-ui/core";
import { DarkContext } from '../../../Context/DarkContext';

import { MapContainer,Marker,Popup,TileLayer } from "react-leaflet";
import "leaflet/dist/leaflet.css";

import icon from "../constants";

const zoom = 13;

function Map({ regionCoord,regionName }) {
  const [map,setMap] = useState(null);
  const { isDarkModeCont } = useContext(DarkContext);

  const L = require("leaflet");

  const mapa1 = L.tileLayer("https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png")
  const mapa2 = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
  
      
  function turnLightMap() {
    mapa1.removeFrom(map);
      mapa2.addTo(map);
  }

  function turnDarkMap() {
    mapa2.removeFrom(map);
      mapa1.addTo(map);
  }

  // useEffect(() => {   
  //   if(isDarkModeCont == true) {
  //     turnDarkMap()
  //   } else {
  //     turnLightMap()
  //   }
  // },[isDarkModeCont])

  return (
    <>
      <Grid container>
        <Grid item xs={10}>
          {regionCoord && (
            <MapContainer
              center={[50,50]}
              zoom={zoom}
              style={{ height: "90vh" }}
              whenCreated={setMap}
            >
              <TileLayer
                attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url={"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"}
              />

              <Marker position={regionCoord} icon={icon}>
                <Popup>{regionName}</Popup>
              </Marker>
            </MapContainer>
          )}
        </Grid>
        <Grid item xs={2}>          
          <button onClick={() => turnLightMap()}>Light Map</button>
          <button onClick={() => turnDarkMap()}>Dark Map</button>
        </Grid>
      </Grid>
    </>
  );
}

export default Map;

单击按钮会更改地图，但如果我激活 useEffect，则会显示此错误：

Error

解决方法

问题是因为 useEffect 是异步的。我通过只包含确认地图已创建来解决它 通过在 "whenCreated = {setMap}" 中生成的 useState 包括 useEffect:

useEffect(() => {   
    if(isDarkModeCont == true && map) {
      turnDarkMap()
    } 
    if(isDarkModeCont == false && map) {
      turnLightMap()
    }
  },[isDarkModeCont]) 

我不知道是否还有其他方法，但这最终解决了我的问题。如果有人不知道并希望将其留在下面让每个人都看到它会很有趣。谢谢大家。