javascript GoogleMap地理编码API错误[未经处理的承诺拒绝:TypeError:undefined不是对象(计算“数据.结果[0].几何”)]

6za6bjd0  于 2023-01-24  发布在  Java
关注(0)|答案(2)|浏览(137)

我遇到了一个关于地理编码API的错误。
当用户按下此按钮时,我正在尝试获取坐标

<TouchableOpacity
            style={tw`flex-row items-center p-5`}
            onPress={() => {
              dispatch(
                setDestination({
                  geometry: {
                    location: { lat: 3.0023237, lng: 101.7059165 },
                  },
                  description,
                }),
              );
            }}
          >

下面是Map.js的完整代码:

import { StyleSheet, Text, View } from 'react-native';
import React, { useEffect, useRef, useState } from 'react';
import MapView, { Marker } from 'react-native-maps';
import tw from 'twrnc';
import { useDispatch, useSelector } from 'react-redux';
import {
  selectDestination,
  selectOrigin,
  setDestination,
  setTravelTimeInformation,
  setMarker,
} from '../slices/navSlice';
import MapViewDirections from 'react-native-maps-directions';
import { GOOGLE_MAPS_APIKEY } from '@env';


const Map = () => {
  const origin = useSelector(selectOrigin);
  const destination = useSelector(selectDestination);
  const mapRef = useRef(null);
  const dispatch = useDispatch();

  useEffect(() => {
    if (!origin || !destination) return;
    mapRef.current.fitToSuppliedMarkers(['origin', 'destination'], {
      edgePadding: { top: 50, right: 50, bottom: 50, left: 50 },
    });
  }, [origin, destination]);

  useEffect(() => {
    if (!origin || !destination) return;

    const getTravelTime = async () => {
      fetch(
        `https://maps.googleapis.com/maps/api/distancematrix/json?destinations=${destination.description}&origins=${origin.description}&units=imperial&key=${GOOGLE_MAPS_APIKEY}`,
      )
        .then((res) => res.json())
        .then((data) => {
          dispatch(setTravelTimeInformation(data.rows[0].elements[0]));
        });
    };
    getTravelTime();
  }, [origin, destination, GOOGLE_MAPS_APIKEY]);

  useEffect(() => {
    if (!origin || !destination) return;

    const getCoordinates = async () => {
      fetch(
        `https://maps.googleapis.com/maps/api/geocode/json?address=${destination.description}&key=${GOOGLE_MAPS_APIKEY}`,
      )
        .then((res) => res.json())
        .then((data) => {
          dispatch(setDestination(data.results[0].geometry.location));
        });
    };
    getCoordinates();
  }, [destination, GOOGLE_MAPS_APIKEY]);

  return (
    <MapView
      ref={mapRef}
      showsUserLocation
      style={tw`flex-1`}
      mapType="mutedStandard"
      initialRegion={{
        latitude: origin.location.lat,
        longitude: origin.location.lng,
        latitudeDelta: 0.005,
        longitudeDelta: 0.005,
      }}
    >
      {origin && destination && (
        <MapViewDirections
          origin={origin.description}
          destination={destination.description}
          apikey={GOOGLE_MAPS_APIKEY}
          strokeWidth={3}
          strokeColor="blue"
        />
      )}
      {origin?.location && (
        <Marker
          pinColor={'green'}
          coordinate={{
            latitude: origin.location.lat,
            longitude: origin.location.lng,
          }}
          title="Origin"
          description={origin.description}
          identifier="origin"
        />
      )}

      {destination?.location && (
        <Marker
          coordinate={{
            latitude: destination.location.lat,
            longitude: destination.location.lng,
          }}
          title="Destination"
          description={destination.description}
          identifier="destination"
        />
      )}
    </MapView>
  );
};

export default Map;

导致错误的确切部件如下:

useEffect(() => {
    if (!origin || !destination) return;

const getCoordinates = async () => {
  fetch(
    `https://maps.googleapis.com/maps/api/geocode/json?address=${destination.description}&key=${GOOGLE_MAPS_APIKEY}`,
  )
    .then((res) => res.json())
    .then((data) => {
      dispatch(setDestination(data.results[0].geometry.location));
    });
};

  getCoordinates();
  }, [destination, GOOGLE_MAPS_APIKEY]);

它来自于:

.then((data) => {
      dispatch(setDestination(data.results[0].geometry.location));
    });

错误:

[Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'data.results[0].geometry')]
at node_modules\promise\setimmediate\core.js:null in tryCallOne
at node_modules\promise\setimmediate\core.js:null in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _allocateCallback$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _callReactNativeMicrotasksPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in flushedQueue

reducer js文件:NavSlice.js

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  origin: null,
  destination: null,
  travelTimeInformation: null,
  marker: {},
};

export const navSlice = createSlice({
  name: 'nav',
  initialState,
  reducers: {
    setOrigin: (state, action) => {
      state.origin = action.payload;
    },
    setDestination: (state, action) => {
      state.destination = action.payload;
    },
    setTravelTimeInformation: (state, action) => {
      state.travelTimeInformation = action.payload;
    },
  },
});

export const { setOrigin, setDestination, setTravelTimeInformation } = navSlice.actions;

export const selectOrigin = (state) => state.nav.origin;
export const selectDestination = (state) => state.nav.destination;
export const selectTravelTimeInformation = (state) => state.nav.travelTimeInformation;
export default navSlice.reducer;

store.js

import { configureStore } from '@reduxjs/toolkit';
import navReducer from './slices/navSlice.js';

export const store = configureStore({
  reducer: {
    nav: navReducer,
  },
});

我不是很清楚为什么这不起作用,有什么想法吗?这应该和你把目的地设置成你最喜欢的位置时的效果类似。比如优步。

kqqjbcuj

kqqjbcuj1#

这是一个简单的未定义错误,这意味着您试图访问的对象不是此行之前的对象console.log(data),请检查***data***是否是***object***或***undefined***,然后检查data object中是否存在结果数组。

dispatch(setDestination(data.results[0].geometry.location));
vi4fp9gy

vi4fp9gy2#

修复!!

useEffect(() => {
        if (!origin || !destination) return;
    
        const getCoordinates = async () => {
          fetch(
            `https://maps.googleapis.com/maps/api/geocode/json?address=${destination.description}&key=${GOOGLE_MAPS_APIKEY}`,
          )
            .then((res) => res.json())
            .then((data) => {
              if(data && data.results && data.results[0] && data.results[0].geometry){
                dispatch(setDestination({...destination, location: data.results[0].geometry.location}));
              }
            });
        };
        getCoordinates();
      }, [destination, GOOGLE_MAPS_APIKEY]);

相关问题