如何解决"React Hook useEffect has a missing dependency: 'currentPosition'"

Question

当我在 useEffect 依赖项数组中包含 currentPosition 或删除它时，代码会变成无限循环。为什么？我对 map 也有同样的问题，但是当我将 map 放在依赖数组中时就可以了。

import { useState, useEffect } from "react";

import { useMap } from "react-leaflet";
import L from "leaflet";

import icon from "./../constants/userIcon";

const UserMarker = () => {
  const map = useMap();
  const [currentPosition, setCurrentPosition] = useState([
    48.856614,
    2.3522219,
  ]);

  useEffect(() => {
    if (navigator.geolocation) {
      let latlng = currentPosition;
      const marker = L.marker(latlng, { icon })
        .addTo(map)
        .bindPopup("Vous êtes ici.");
      map.panTo(latlng);

      navigator.geolocation.getCurrentPosition(function (position) {
        const pos = [position.coords.latitude, position.coords.longitude];
        setCurrentPosition(pos);
        marker.setLatLng(pos);
        map.panTo(pos);
      });
    } else {
      alert("Problème lors de la géolocalisation.");
    }
  }, [map]);

  return null;
};

export default UserMarker;

Answer 1

来自 DCTID 的评论解释了 useEffect 挂钩中包含状态会造成无限循环的原因。

您需要确保不会发生这种情况！您有两个选择：

添加忽略评论并保持原样
创建一个额外的冗余变量来存储变量的当前值currentPosition并且仅在值实际更改时才执行函数

第二种方法的实现：

let currentPosition_store = [48.856614, 2.3522219];

useEffect(() => {
    if (!hasCurrentPositionChanged()) {
        return;
    }

    currentPosition_store = currentPosition;

    // remaining function

    function hasCurrentPositionChanged() {
        if (currentPosition[0] === currentPosition_store[0] &&
            currentPosition[1] === currentPosition_store[1]
        ) {
            return false;
        }
        
        return true;
    }
}, [map, currentPosition]);

Answer 2

为了方便理解，先指出原因再解决。

为什么？我对 map 也有同样的问题，但是当我将 map 放在依赖数组中时就可以了。

回答：原因是useEffect是重新运行基于它的依赖。 useEffect first 运行 when Component render -> component re-render (cuz its props change...) -> useEffect will compare and re-运行 if its dependencies change.

在你的情况下，map Leaflet Map 我敢打赌，如果你的组件只是重新渲染，react-leaflet 将 return 相同的 Map 实例（相同的引用）-> 当你重新渲染组件时-render -> map (Leaflet Map instance) don't change -> useEffect not re-运行 -> infinity loop not happen.
currentPosition 是您的本地状态，您在 useEffect setCurrentPosition(pos); -> 组件重新渲染 -> 依赖项更改中更新它（currentPosition 在浅比较中不同） -> useEffect re-运行 -> setCurrentPosition(pos); 使组件重新渲染 -> 无限循环

解决方案：

有一些解决方案：

通过在依赖项行的正上方添加 // eslint-disable-next-line exhaustive-deps 来禁用 lint 规则。但这根本不推荐。通过这样做，我们打破了 useEffect 的工作方式。
拆分您的 useEffect：

import { useState, useEffect } from "react";

import { useMap } from "react-leaflet";
import L from "leaflet";

import icon from "./../constants/userIcon";

const UserMarker = () => {
  const map = useMap();
  const [currentPosition, setCurrentPosition] = useState([
    48.856614,
    2.3522219,
  ]);
  
  // They are independent logic so we can split it yo
  useEffect(() => {
    if (navigator.geolocation) {
      let latlng = currentPosition;
      const marker = L.marker(latlng, { icon })
        .addTo(map)
        .bindPopup("Vous êtes ici.");
      map.panTo(latlng);
    } else {
      alert("Problème lors de la géolocalisation.");
    }
  }, [map, currentPosition]);

  useEffect(() => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function (position) {
        const pos = [position.coords.latitude, position.coords.longitude];
        setCurrentPosition(pos);
        marker.setLatLng(pos);
        map.panTo(pos);
      });
    }
  }, [map]);

  return null;
};

export default UserMarker;

Dan 有一篇关于 useEffect 的文章，值得一看：https://overreacted.io/a-complete-guide-to-useeffect/#dont-lie-to-react-about-dependencies

Answer 3

谢谢，我已经解决了这个冲突：

import { useEffect } from "react";

import { useMap } from "react-leaflet";
import L from "leaflet";

import icon from "./../constants/userIcon";

const UserMarker = () => {
  const map = useMap();

  useEffect(() => {
    const marker = L.marker;
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function (position) {
        const latlng = [position.coords.latitude, position.coords.longitude];
        marker(latlng, { icon })
          .setLatLng(latlng)
          .addTo(map)
          .bindPopup("Vous êtes ici.");
        map.panTo(latlng);
      });
    } else {
      alert("Problème lors de la géolocalisation.");
    }
  }, [map]);

  return null;
};

export default UserMarker;

Answer 4

如果 currentPosition 在依赖数组中，你会得到无限循环的原因：

const [currentPosition, setCurrentPosition] = useState([
    48.856614,
    2.3522219,
  ]);

您最初有一个 currentPosition 的值，然后您在 useEffect 内部进行更改，这会导致您的组件重新渲染，并且这种情况会无限发生。您不应将其添加到依赖项数组。

您收到“缺少依赖项警告”的原因是，如果您在 useEffect 中使用的任何变量在该组件内定义或作为道具传递给组件，您必须将其添加到依赖项数组，否则反应会警告你。这就是为什么你应该将 map 添加到数组中，因为你没有在 useEffect 中更改它，所以它不会导致重新渲染。

在这种情况下，您必须通过添加以下内容来告诉 es-lint 不要向我显示该警告：//eslint-disable-next-line react-hooks/exhaustive-deps 因为您知道自己在做什么：

useEffect(() => {
   if (navigator.geolocation) {
      let latlng = currentPosition;
      const marker = L.marker(latlng, { icon })
        .addTo(map)
        .bindPopup("Vous êtes ici.");
      map.panTo(latlng);

      navigator.geolocation.getCurrentPosition(function (position) {
        const pos = [position.coords.latitude, position.coords.longitude];
        setCurrentPosition(pos);
        marker.setLatLng(pos);
        map.panTo(pos);
      });
    } else {
      alert("Problème lors de la géolocalisation.");
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [map]);

该注释将关闭对该行代码的依赖性检查。

如何解决"React Hook useEffect has a missing dependency: 'currentPosition'"

How to resolve "React Hook useEffect has a missing dependency: 'currentPosition'"

leaflet

reactjs

react-leaflet

react-leaflet-search

esri-leaflet-geocoder