reactjs - 如何解决“React Hook useEffect 缺少依赖项:'currentPosition'”
问题描述
当我包含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;
解决方案
谢谢,我已经解决了这个冲突:
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;
推荐阅读
- javascript - 如何从嵌套对象数组中获取值
- android - Flutter:FAILURE:构建失败并出现异常
- python - 为什么在绘制 Pandas 箱线图时缺少列?
- image - 如何训练具有可变输出大小的对象检测模型?
- electron - electronjs BrowserView - 缓存持续多长时间?
- windows - 使用相同的 UDP 端口进行单播接收、多播发送
- vue.js - 使用父组件类设置Vue中的不同元素
- autodesk-forge - 是否可以在 Forge Viewer 中调用 IFC 类型的DESCRIPTION 值?
- python - OpenCV VideoWriter 对象在视频的某些部分速度很快
- rest - 如果资源实际上没有被删除,而只是用时间戳标记为已删除,我应该使用 DELETE 方法吗?