javascript - 使用 navigator.geolocation.watchPosition 时 React 中的无限循环

Question

所以我试图获取用户的位置并将其存储在React.State. 我有一个设置页面，用户可以在其中设置settings.positionAllowed或通过按下按钮来设置true，falsefalse 是默认值。直到按下按钮，一切正常。但是一旦用户将设置设置为 true 并返回主页，就会创建一个无限循环，并且应用程序会在一段时间后崩溃。我首先想到的原因是navigator.geolovation.watchPosition每次重新渲染组件时都会创建一个实例。而且效果挂钩也没有解决问题。

这是我的代码：

navigator.geolocation ? let posObj = {positionAllowed: false} : let posObj = {positionAllowed: true};

const [settings, setSettings] = useState(posObj);
useEffect(() => {
    if(settings.positionAllowed&&navigator.geolocation){
        let geolocation = navigator.geolocation.watchPosition((rawPosition)=>{
            let positionData = {
                positionAvailable: true,
                    data: rawPosition
                }
                if(positionData!=position){
                    setPosition(positionData);
                }
            },(err)=>{
                console.log(err);
            },{
                enableHighAccuracy: true,
                maximumAge: 10000
            });
        }
    }
});

标签： javascriptnode.jsreactjsgeolocation

Answer 1

这样做的原因是因为您的 useEffect 每次渲染都在运行。您需要添加一个依赖数组。如果你使用一个空白的依赖数组，它只会在第一次渲染时运行。

这可能有助于您更好地理解它。 [https://medium.com/better-programming/understanding-the-useeffect-dependency-array-2913da504c44][1]

navigator.geolocation ? let posObj = {positionAllowed: false} : let posObj = {positionAllowed: true};

const [settings, setSettings] = useState(posObj);
useEffect(() => {
    if(settings.positionAllowed&&navigator.geolocation){
        let geolocation = navigator.geolocation.watchPosition((rawPosition)=>{
            let positionData = {
                positionAvailable: true,
                    data: rawPosition
                }
                if(positionData!=position){
                    setPosition(positionData);
                }
            },(err)=>{
                console.log(err);
            },{
                enableHighAccuracy: true,
                maximumAge: 10000
            });
        }
    }
}, []);