React.js / Leaflet -- 运行 useEffect on Mount only in DevServer

Question

我正在运行关注这种行为，我必须运行 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"

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

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

React.js / Leaflet -- 运行 useEffect on Mount only in DevServer

React.js / Leaflet -- Run useEffect on Mount only in DevServer

javascript

leaflet

reactjs

use-effect