React.js /传单-只在DevServer上运行useEffect

Question

我遇到了这种行为，我必须只运行useEffect钩子一次。其原因主要是因为我必须插入一个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);

别忘了进口“反应”

import React, {useEffect} from "react"

您还可以将useEffect替换为useMemo，因为您打算回忆这个值，而不是实际触发副作用。

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