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

Posted 2023-02-23

【中文标题】使用 navigator.geolocation.watchPosition 时 React 中的无限循环

【英文标题】：Infinte Loop in React while using navigator.geolocation.watchPosition

【发布时间】：2020-12-31 02:55:09

【问题描述】：

所以我试图获取用户的位置并将其存储在React.State 中。我有一个设置页面，用户可以通过按下按钮将settings.positionAllowed 设置为true 或false，false 是默认值。直到按下按钮，一切正常。但是一旦用户将设置设置为 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
            );
        
    
);

【参考方案1】：

您需要将 [] 作为useEffect 的第二个参数传递。然后，它将像类组件中的componentDidMount() 一样工作。除非，每次状态更新都会被调用，会无限循环。

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
            );
        
    
, []);  // <---------------------------------

【参考方案2】：

这是因为你的 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
            );
        
    
, []);