3

当我包含currentPosition在useEffect依赖数组中或删除它时，代码变成了一个无限循环。为什么？我对 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;
4

4 回答 4

0

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

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;
于 2021-03-28T16:21:26.913 回答
0

如果 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]);

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

于 2021-03-29T00:04:53.580 回答
0

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]);
于 2021-03-27T23:11:19.240 回答
0

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

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

答：原因是 useEffect 基于它的依赖关系重新运行。useEffect 在组件渲染时第一次运行 -> 组件重新渲染（因为它的 props 改变了......） -> 如果它的依赖关系发生变化，useEffect 将进行浅比较并重新运行。

  • 在您的情况下，如果您的组件只是重新渲染->当您重新渲染组件时-> （Leaflet Map 实例）不更改-> useEffect 不更改，我敢打赌， map Leaflet Mapmap react-leaflet 将返回相同的 Map 实例（相同的引用）重新运行-> 无限循环不会发生。
  • currentPosition是您的本地状态，您在 useEffect setCurrentPosition(pos);-> 组件重新渲染 ->currentPosition依赖项更改中更新它（currentPosition 在浅比较中不同）-> useEffect re-run -> setCurrentPosition(pos);make component re-render -> infinity loop
  1. 解决方案：

有一些解决方案：

  • // 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

于 2021-03-27T23:41:32.623 回答