我想在用户尚未选择允许或拒绝时显示一条警报消息。我已经为此目的实施了状态管理,但该消息没有显示。我正在使用导航器 API。这是我的代码:
const [noGeo, setNogeo] = useState(false);
useEffect(() => {
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(
function (position) {
formik.setFieldValue('latitud', position.coords.latitude);
formik.setFieldValue('longitud', position.coords.longitude);
},
function (error) {
console.error("Error getting geolocation: ", error.message);
},
{
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
}
);
} else {
setNogeo(true);
}
}
}, []);
return (
<>
{noGeo ? <AlertMessage />: ''}
</>
);
我希望在用户决定允许或拒绝访问位置之前显示警报消息组件。
import React, { useState, useEffect } from 'react';
function App() {
const [permissionStatus, setPermissionStatus] = useState('pending');
useEffect(() => {
// Check if geolocation is supported by the browser
if (!navigator.geolocation) {
alert('Geolocation is not supported by your browser');
return;
}
// Check permission status when component mounts
navigator.permissions.query({ name: 'geolocation' })
.then(permission => {
setPermissionStatus(permission.state);
});
// Subscribe to permission changes
const permissionHandler = (permission) => {
setPermissionStatus(permission.state);
};
navigator.permissions.addEventListener('change', permissionHandler);
// Clean up subscription on component unmount
return () => {
navigator.permissions.removeEventListener('change', permissionHandler);
};
}, []);
// Render alert message based on permission status
const renderAlertMessage = () => {
if (permissionStatus === 'granted') {
return null; // Geolocation permission granted, no need to show alert
} else if (permissionStatus === 'denied') {
return <div>Please enable geolocation in your browser settings to use this app.</div>;
} else {
return <div>Waiting for geolocation permission...</div>;
}
};
return (
<div>
{renderAlertMessage()}
{/* Your app content here */}
</div>
);
}
export default App;
尝试此代码,这将有助于弹出警报