如何解决"React Hook useEffect缺少依赖项：'currentPosition'"问题。

Question

当我在useEffect的依赖数组中包含currentPosition或删除它时，代码会变成无限循环。为什么呢？ 但是，当我将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;

- gcbox999

---

currentPosition是什么？它在您提供的代码中没有出现。 - Nicholas Tower

当您将变量放置在useEffect的数组第二个参数中时，React将在每次变量更改时调用该函数。您每次调用useEffect时都会更改map变量，导致它一遍又一遍地被调用。您可以添加一个条件来检查它是否具有您期望的数据，并且如果有，则不更新map。但是，文档显示的示例与您的示例非常不同，也许可以尝试使用react-leaflet的方式？ - DCTID

抱歉，我复制了错误的代码！ - gcbox999

这个回答解决了你的问题吗？如何在使用useEffect React Hook时修复缺少依赖项警告？ - Yilmaz

Answer 1

DCTID的评论解释了为什么在useEffect钩子中包含状态会创建一个无限循环。

你需要确保这不会发生！你有两个选择：

1. 添加一个忽略注释并将其保留为原样

2. 创建一个额外的冗余变量来存储变量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]);

- LeonMueller - OneAndOnly

Answer 2

为了易于理解，我将先指出原因，然后再提出解决方案。

1. 为什么？我遇到了与地图相关的相同问题，但当我将地图放在依赖数组中时，它就可以正常工作。

答案：原因是 useEffect 基于其依赖项重新运行。useEffect 首次运行时，组件呈现 -> 组件重新呈现（因为其 props 改变...） -> 如果其依赖项发生更改，则 useEffect 将浅层比较并重新运行。

• 在您的情况下，map Leaflet Map 我敢打赌 react-leaflet 将返回相同的地图实例（相同的引用），如果您的组件只是简单地重新渲染 -> 当您的组件重新渲染时 -> map（Leaflet 地图实例）不会改变 -> useEffect 不重新运行 -> 无限循环不会发生。
• currentPosition 是您的本地状态，并且您在 useEffect 中更新它 setCurrentPosition(pos); -> 组件重新渲染 -> 依赖项中的 currentPosition 更改（在浅比较中，currentPosition 不同） -> useEffect 重新运行 -> setCurrentPosition(pos); 使组件重新渲染 -> 无限循环

2. 解决方案：

有一些解决方案：

• 通过在依赖线上方添加 // eslint-disable-next-line exhaustive-deps 来禁用代码规则，但这根本不推荐。通过这样做，我们破坏了 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;

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

- Tony Nguyen

---

你可能需要在第二个 useEffect 中将 setCurrentPosition 作为依赖项来避免另一个 eslint 警告。这不会成为问题，因为 setState 是稳定的函数。 - buzatto

从React文档中可以得知，你不需要这样做。React保证setState函数的身份标识是稳定的，并且在重新渲染时不会改变。因此，在useEffect或useCallback的依赖列表中省略它是安全的。 - Tony Nguyen

感谢您在本文中的帮助。 - gcbox999

@gcbox999 如果这个回答有帮助并解决了您的问题，请考虑投票或接受我的答案。 - Tony Nguyen

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;

- gcbox999

Answer 4

如果当前位置(currentPosition)在依赖数组(dependency array)中，你会得到无限循环的原因是：

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

你最初为currentPosition设置了一个值，然后在useEffect中进行更改，这会导致组件无限重新渲染。你不应该将其添加到依赖项数组中。

你收到“缺少依赖项警告”的原因是，如果你在useEffect中使用的任何变量在该组件内部定义或作为prop传递给组件，则必须将其添加到依赖项数组中，否则React会发出警告。这就是为什么你应该将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]);
 

那个注释会关闭代码行上的依赖性检查。

- Yilmaz