谷歌地图地理编码 API 错误 [未处理的 promise 拒绝：TypeError：undefined 不是 object（评估 'data.results[0].geometry'）]

Question

我遇到有关地理编码 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;

商店.js

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

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

我不太确定为什么这不起作用，有什么想法吗？ 这应该与将目的地设置为您最喜欢的位置时的工作方式类似。 像优步。

Answer 1

这是一个简单的未定义错误，这意味着您尝试访问的 object 不是 object 此行之前的console.log(data)并检查数据是object还是未定义，然后检查数据 object 中是否有结果数组.

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

Answer 2

固定的！！

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