为什么我允许位置权限后不能设置状态值（如果我允许位置权限，默认值为当前位置）？答案

【问题标题】：Why can't I set state value (default value is current location if I allow location permission) after I allowed location permission?为什么我允许位置权限后不能设置状态值（如果我允许位置权限，默认值为当前位置）？
【发布时间】：2021-11-24 01:52:25
【问题描述】：

我选择了城市的选项集合。如果我允许，默认选择的值是当前位置。但是在我允许位置权限后，无法选择其他值。所以，我可以选择另一个城市一秒钟，然后再次设置状态当前城市。

导航地理位置代码：

   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;

根据位置坐标找到最近的城市并设置位置代码：

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]);
  };

返回选择选项：

<select value={loc.name} onChange={handleChange}>
        {city.map((val, i) => (
          <option id={i} key={i} value={val.name}>
            {val.name} - {i}
          </option>
        ))}
</select>

【问题讨论】：

标签： javascript reactjs react-hooks jsx

【解决方案1】：

通过将值设置为您的反应状态，您已将其设为 controlled input。

一种解决方案是从您的 useCurrentLocation 钩子中导出 setLocation 并使用它而不是您的 setLoc（或者如果您需要 setLoc 则同时调用两者）。

另一种方法是使用defaultvalue (uncontrolled input)。

【讨论】：

【解决方案2】：

我解决了这个问题！

解决方案是将 NearestCity 放入由位置触发的 useEffect 中。

useEffect(() => {
    location && NearestCity(location.latitude, location.longitude);
  }, [location]);

【讨论】：