我遇到了一个关于地理编码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,
},
});
我不是很清楚为什么这不起作用,有什么想法吗?这应该和你把目的地设置成你最喜欢的位置时的效果类似。比如优步。
2条答案
按热度按时间kqqjbcuj1#
这是一个简单的未定义错误,这意味着您试图访问的对象不是此行之前的对象
console.log(data)
,请检查***data***是否是***object***或***undefined***,然后检查data object中是否存在结果数组。vi4fp9gy2#
修复!!