时间戳

首页 > 解决方案 > React.js / Leaflet -- 仅在 DevServer 中的 Mount 上运行 useEffect

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

问题描述

我遇到了这种行为，我必须只运行一次 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;

标签： javascriptreactjsleafletuse-effect

解决方案

既然你的组件是直接在 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)
}, []);

推荐阅读