Javascript 使用navigator.geolocation.watchPosition时在React中执行Infinte循环

因此，我试图获取用户的位置并将其存储在

React.State

中。我有一个设置页面，用户可以在其中设置

设置。通过按按钮，将
设置为
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
            });
        }
    }
});

您需要将[]作为
useffect
的第二个参数传递。然后，它将像类组件中的
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
            });
        }
    }
}, []);  // <---------------------------------

navigator.geolocation？设posObj={positionlowed:false}：设posObj={positionlowed:true}；
常量[设置，设置]=使用状态（posObj）；
useffect（（）=>{
if（settings.positionLowed&&navigator.geolocation）{
让geolocation=navigator.geolocation.watchPosition（（rawPosition）=>{
让位置数据={
位置：正确，
数据：原始位置
}
if（位置数据！=位置）{
设置位置（位置数据）；
}
}，（错误）=>{
控制台日志（err）；
},{
EnableHighAccurance:正确，
最高限额：10000
});
}
}
}, []);  //  您需要将[]作为
useffect
的第二个参数传递。然后，它将像类组件中的
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
            });
        }
    }
}, []);  // <---------------------------------

navigator.geolocation？设posObj={positionlowed:false}：设posObj={positionlowed:true}；
常量[设置，设置]=使用状态（posObj）；
useffect（（）=>{
if（settings.positionLowed&&navigator.geolocation）{
让geolocation=navigator.geolocation.watchPosition（（rawPosition）=>{
让位置数据={
位置：正确，
数据：原始位置
}
if（位置数据！=位置）{
设置位置（位置数据）；
}
}，（错误）=>{
控制台日志（err）；
},{
EnableHighAccurance:正确，
最高限额：10000
});
}
}
}, []);  //  原因是每次渲染都会运行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
            });
        }
    }
}, []);

原因是每次渲染都会运行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
            });
        }
    }
}, []);