Tengo opciones selectas de colección de ciudades. El valor seleccionado predeterminado es la ubicación actual si lo permito. Pero después de permitir el permiso de ubicación, no puedo seleccionar otro valor. Por lo tanto, puedo seleccionar otra ciudad por un segundo y configurar la ciudad actual del estado nuevamente.
código de geolocalización de navegación:
const useCurrentLocation = () => { // store location in state const [location, setLocation] = useState(); // Success handler for geolocation's `getCurrentPosition` method const handleSuccess = (position) => { const { latitude, longitude } = position.coords; setLocation({ latitude, longitude }); }; useEffect(() => { if (!navigator.geolocation) { return false; } // Call the Geolocation API navigator.geolocation.getCurrentPosition(handleSuccess); }, []); // Expose location result return { location }; }; export default useCurrentLocation;encuentre la ciudad más cercana según las coordenadas de ubicación y establezca el código de ubicación:
function Nearest({ loc, setLoc }) { const { location } = useCurrentLocation(); const { city } = useCity(); location && NearestCity(location.latitude, location.longitude); // Convert Degress to Radians function Deg2Rad(deg) { return (deg * Math.PI) / 180; } function PythagorasEquirectangular(lat1, lon1, lat2, lon2) { lat1 = Deg2Rad(lat1); lat2 = Deg2Rad(lat2); lon1 = Deg2Rad(lon1); lon2 = Deg2Rad(lon2); var R = 6371; // km var x = (lon2 - lon1) * Math.cos((lat1 + lat2) / 2); var y = lat2 - lat1; var d = Math.sqrt(x * x + y * y) * R; return d; } function NearestCity(latitude, longitude) { var minDif = 99999; var closest; var dif; city.map((item, index) => { dif = PythagorasEquirectangular(latitude, longitude, item.lat, item.lon); if (dif < minDif) { closest = index; minDif = dif; } }); setLoc(city[closest]); } //select city const handleChange = (e) => { var index = e.target.selectedIndex; setLoc(city[index]); };opciones de selección de retorno:
<select value={loc.name} onChange={handleChange}> {city.map((val, i) => ( <option id={i} key={i} value={val.name}> {val.name} - {i} </option> ))} </select>Al establecer el valor en su estado de reacción, lo ha convertido en una entrada controlada .
Una solución sería exportar setLocation desde su gancho useCurrentLocation y usarlo en lugar de su setLoc (o llamar a ambos si necesita setLoc ).
Otro enfoque podría ser usar defaultvalue (entrada no controlada) .
¡Resolví el problema!
la solución es poner NearestCity dentro de un useEffect que se activa por ubicación.
useEffect(() => { location && NearestCity(location.latitude, location.longitude); }, [location]);