未定义（读取 'coords'）使用@ionic-native/geolocation - 离子/反应

Question

我试图将地图置于地理位置中心，但出现以下错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'coords')

如果我在 getLocationHandler 中控制台记录位置，对象似乎有坐标。

import GoogleMapReact from "google-map-react";
import { Geolocation } from "@ionic-native/geolocation";
import { IonLoading } from "@ionic/react";

const Map = (props) => {

  const [isLoading, setIsLoading] = useState(false);
  const [position, setPosition] = useState();

  const getLocationHandler = async () => {
    try {
      setIsLoading(true);
      const position = await Geolocation.getCurrentPosition();
      setPosition(position);
    } catch (e) {}
    setIsLoading(false);
  };

  useEffect(() => {
    getLocationHandler();
  }, []);

  return (
    <>
      <IonLoading
        isOpen={isLoading}
        message={"Getting Location..."}
        onDidDismiss={() => setIsLoading(false)}
      ></IonLoading>
      <div className="map">
        <div className="google-map" style={{ height: "100vh", width: "100%" }}>
          <GoogleMapReact
            bootstrapURLKeys={{ key: .... }}
            defaultCenter={
              {
                lat: position.coords.latitude,
                lng: position.coords.longitude,
              }
            }
            defaultZoom={11}>
          </GoogleMapReact>
        </div>
      </div>
    </>
  );
};

export default Map;

Answer 1

在您的第一次渲染中，position 将是未定义的，因此当您尝试使用 position.coords.latitude 时它会抛出该错误。我可能会利用您的 isLoading 状态，并且仅在该状态为 false 时呈现组件的第二部分 -

<div className="google-map" style={{ height: "100vh", width: "100%" }}>
  {!isLoading && (
    <GoogleMapReact
      ...etc
  )}
</div>

此外，将 isLoading 的初始值设置为 true 而不是在异步加载函数中手动将其设置为 true 可能更有意义。

或者，您可以直接检查 position?.coords?.latitude

而不是检查 isLoading

未定义（读取 'coords'）使用@ionic-native/geolocation - 离子/反应

Undefined (reading 'coords') using @ionic-native/geolocation - ionic / react

reactjs

ionic-framework

react-native