React.js / Leaflet — 仅在 DevServer 中运行 useEffect on Mount

Question

我遇到了这种行为，我必须只运行一次 useEffect Hook 才能做出反应。 原因主要是因为我必须启动一个 leaflet.js map，这不能超过一次。

但是每当我更改组件 jsx 中的某些内容时，DevServer 的“热重载”功能似乎会忽略 useEffects 第二个参数[]并重新运行它，尽管 Coachmap 的coachmap仍然存在。 此行为引发错误： map is already initialised ，只能通过重新加载浏览器选项卡来修复。

你有什么想法我可以防止对重新初始化 leaflet 做出反应吗？

我已经尝试检查typeof coachmap == 'undefined'是否奇怪地仍然重新初始化 map。

这是我的组件代码：

import * as L from "leaflet/dist/leaflet";
import "leaflet/dist/leaflet.css";
import { useEffect } from "react";

function CoachMap() {
  useEffect(() => {
    if (typeof coachmap == "undefined") {
      // Initialise Leaflet.js Map
      const coachmap = L.map("coach-map").setView([51.505, -0.09], 13);
    }
  }, []);

  return (
    <div className="container mx-auto my-4 ab">
      <div id="coach-map"></div>
    </div>
  );
}

export default CoachMap;

Answer 1

既然你的组件是直接在 App.js 中调用的，那你为什么不使用 React.memo 来包装组件呢。 （这将防止不必要的重新渲染）

export default React.memo(CoachMap);

不要忘记导入“反应”

import React, {useEffect} from "react"

您也可以用 useMemo 替换 useEffect ，因为您打算记住该值而不是实际触发副作用。

const coachmap = React.useMemo(()=>{
  return L.map("coach-map").setView([51.505, -0.09], 13)
}, []);