React.js/Leaflet--仅在DevServer中的Mount上运行useEffect

Question

我遇到了行为，我必须在react中只运行一次useEffect Hook。原因主要是因为我必须初始化一个leaflet.js映射，这种情况不能发生多次。

但每当我更改组件jsx中的某些内容时；热重新加载"；DevServer的特性似乎忽略了useEffects第二个参数[]，并无论如何重新运行它，尽管coachmap的状态仍然存在。此行为引发一个错误：map is already initialised，只能通过重新加载浏览器选项卡来修复。

你知道我如何防止对重新初始化传单做出反应吗？

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

这是我的组件代码：

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);

不要忘记导入"React">

import React, {useEffect} from "react"

你也可以用useMemo代替useEffect，因为你打算记住这个值，而不是实际产生副作用。

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