Javascript 未处理的承诺拒绝:TypeError:undefined不是一个计算';出发地点地图';在react native中映射setState时发生
我成功地从googledirections获取了JSON响应,因为我试图从JSON响应获取传输信息,成功时最初看起来是这样的Javascript 未处理的承诺拒绝:TypeError:undefined不是一个计算';出发地点地图';在react native中映射setState时发生,javascript,google-maps,react-native,google-directions-api,Javascript,Google Maps,React Native,Google Directions Api,我成功地从googledirections获取了JSON响应,因为我试图从JSON响应获取传输信息,成功时最初看起来是这样的 Object { "geocoded_waypoints": Array [ Object { "geocoder_status": "OK", "place_id": "ChIJ2YDFT9zweUgRgt5Tws6n3hs", "types": Array [ "premise", ],
Object {
"geocoded_waypoints": Array [
Object {
"geocoder_status": "OK",
"place_id": "ChIJ2YDFT9zweUgRgt5Tws6n3hs",
"types": Array [
"premise",
],
},
Object {
"geocoder_status": "OK",
"place_id": "ChIJW2PCihXxeUgRRWgA9kOzpjY",
"types": Array [
"establishment",
"food",
"lodging",
"point_of_interest",
"restaurant",
],
},
],
"routes": Array [
Object {
"bounds": Object {
"northeast": Object {
"lat": 52.9242042,
"lng": -1.466251,
},
"southwest": Object {
"lat": 52.9004767,
"lng": -1.4801554,
},
},
"copyrights": "Map data ©2018 Google",
"legs": Array [
Object {
"arrival_time": Object {
"text": "9:21am",
"time_zone": "Europe/London",
"value": 1524558107,
},
"departure_time": Object {
"text": "8:56am",
"time_zone": "Europe/London",
"value": 1524556589,
},
"distance": Object {
"text": "3.4 km",
"value": 3407,
},
"duration": Object {
"text": "25 mins",
"value": 1518,
},
"end_address": "Full St, Derby DE1 3AF, UK",
"end_location": Object {
"lat": 52.9242042,
"lng": -1.4756769,
},
"start_address": "50 Chatham St, Derby DE23 8TH, UK",
"start_location": Object {
"lat": 52.9004767,
"lng": -1.480144,
},
"steps": Array [
Object {
"distance": Object {
"text": "0.2 km",
"value": 175,
},
"duration": Object {
"text": "2 mins",
"value": 123,
},
"end_location": Object {
"lat": 52.900963,
"lng": -1.478217,
},
"html_instructions": "Walk to Randolph Road",
"polyline": Object {
"points": "_c{aIza`Hm@BEyHC_Ag@S?H",
},
"start_location": Object {
"lat": 52.9004767,
"lng": -1.480144,
},
"steps": Array [
Object {
"distance": Object {
"text": "26 m",
"value": 26,
},
"duration": Object {
"text": "1 min",
"value": 18,
},
"end_location": Object {
"lat": 52.9007148,
"lng": -1.4801554,
},
"html_instructions": "Head <b>north</b> on <b>Chatham St</b> toward <b>Randolph Rd</b>",
"polyline": Object {
"points": "_c{aIza`Hm@B",
},
"start_location": Object {
"lat": 52.9004767,
"lng": -1.480144,
},
"travel_mode": "WALKING",
},
Object {
"distance": Object {
"text": "0.1 km",
"value": 126,
},
"duration": Object {
"text": "1 min",
"value": 88,
},
"end_location": Object {
"lat": 52.9007561,
"lng": -1.4782714,
},
"html_instructions": "Turn <b>right</b> onto <b>Randolph Rd</b>",
"maneuver": "turn-right",
"polyline": Object {
"points": "md{aI~a`HEyHC_A",
},
"start_location": Object {
"lat": 52.9007148,
"lng": -1.4801554,
},
"travel_mode": "WALKING",
},
Object {
"distance": Object {
"text": "23 m",
"value": 23,
},
"duration": Object {
"text": "1 min",
"value": 17,
},
"end_location": Object {
"lat": 52.900963,
"lng": -1.478217,
},
"html_instructions": "Turn <b>left</b> onto <b>St Thomas Rd</b><div style=\"font-size:0.9em\">Destination will be on the left</div>",
"maneuver": "turn-left",
"polyline": Object {
"points": "wd{aIdv_Hg@S?H",
},
"start_location": Object {
"lat": 52.9007561,
"lng": -1.4782714,
},
"travel_mode": "WALKING",
},
],
"travel_mode": "WALKING",
},
Object {
"distance": Object {
"text": "2.5 km",
"value": 2460,
},
"duration": Object {
"text": "15 mins",
"value": 900,
},
"end_location": Object {
"lat": 52.91829079999999,
"lng": -1.4748049,
},
"html_instructions": "Bus towards Derby",
"polyline": Object {
"points": "_f{aIzu_HsPw@eHgW_IkOmHcPoLiNgKxQwHvL{LxKuK`G",
},
"start_location": Object {
"lat": 52.900963,
"lng": -1.478217,
},
"transit_details": Object {
"arrival_stop": Object {
"location": Object {
"lat": 52.91829079999999,
"lng": -1.4748049,
},
"name": "Osmaston Road (Stop A8)",
},
"arrival_time": Object {
"text": "9:13am",
"time_zone": "Europe/London",
"value": 1524557580,
},
"departure_stop": Object {
"location": Object {
"lat": 52.900963,
"lng": -1.478217,
},
"name": "Randolph Road",
},
"departure_time": Object {
"text": "8:58am",
"time_zone": "Europe/London",
"value": 1524556715,
},
"headsign": "Derby",
"line": Object {
"agencies": Array [
Object {
"name": "Arriva Midlands",
"url": "http://www.traveline.info/",
},
],
"color": "#11416d",
"name": "Sapphire 38",
"text_color": "#ffffff",
"vehicle": Object {
"icon": "//maps.gstatic.com/mapfiles/transit/iw2/6/bus2.png",
"name": "Bus",
"type": "BUS",
},
},
"num_stops": 9,
},
"travel_mode": "TRANSIT",
},
Object {
"distance": Object { ... truncated from a larger response...
上面的代码导致以下JSON结果:
Object {
"distance": Object {
"text": "3.1 km",
"value": 3129,
},
"duration": Object {
"text": "20 mins",
"value": 1200,
},
"end_location": Object {
"lat": 52.92222599999999,
"lng": -1.471283,
},
"html_instructions": "Bus towards Derby",
"polyline": Object {
"points": "_f{aIzu_HsPw@eHgW_IkOmHcPoLiNgKxQwHvL{LxKuK`G{AqEJoPcU`A",
},
"start_location": Object {
"lat": 52.900963,
"lng": -1.478217,
},
"transit_details": Object {
"arrival_stop": Object {
"location": Object {
"lat": 52.92222599999999,
"lng": -1.471283,
},
"name": "Bus Station (Bay 19)",
},
"arrival_time": Object {
"text": "9:45am",
"time_zone": "Europe/London",
"value": 1524645900,
},
"departure_stop": Object {
"location": Object {
"lat": 52.900963,
"lng": -1.478217,
},
"name": "Randolph Road",
},
"departure_time": Object {
"text": "9:24am",
"time_zone": "Europe/London",
"value": 1524644676,
},
"headsign": "Derby",
"line": Object {
"agencies": Array [
Object {
"name": "Arriva Midlands",
"url": "http://www.traveline.info/",
},
],
"color": "#11416d",
"name": "Sapphire 38",
"text_color": "#ffffff",
"vehicle": Object {
"icon": "//maps.gstatic.com/mapfiles/transit/iw2/6/bus2.png",
"name": "Bus",
"type": "BUS",
},
},
"num_stops": 12,
},
"travel_mode": "TRANSIT",
}
如图所示,它返回我所需的实际JSON信息,我需要交通信息,特别是出发站位置,如下所示:
"departure_stop": Object {
"location": Object {
"lat": 52.900963,
"lng": -1.478217,
},
"name": "Randolph Road",
}
我正在获取出发地点的数据,以便设置state()。在尝试使用.map()以获取纬度和经度值的初始尝试之后,我无法这样做,因为我得到以下结果:
[未处理的承诺拒绝:TypeError:undefined不是函数(评估'departureloc.map')]
以下是我的尝试:
fetch('https://maps.googleapis.com/maps/api/directions/json?origin=' + latitude + ',' + longitude + '&destination=' + goingto + '&mode=transit&transit_mode=bus&key=' + apiDirectionskey)
.then((resdirections) => resdirections.json())
.then((responseJson4) => {
const departureloc = responseJson4.routes[0].legs[0].steps[1];
console.log(departureloc);
fetch('https://maps.googleapis.com/maps/api/directions/json?origin=' + latitude + ',' + longitude + '&destination=' + goingto + '&mode=transit&transit_mode=bus&key=' + apiDirectionskey)
.then((resdirections) => resdirections.json())
.then((responseJson4) => {
//const departureloc = responseJson4.routes[0].legs[0].steps[1];
const departureloc = responseJson4.routes[0].legs[0].steps[1];
console.log(departureloc);
let busscoords = departureloc.map((outcome) => {
return ( {
latitude: console.log(outcome.departure_stop.location.lat),
//longitude: outcome.departure_stop.location.lng,
});
});
//this.setState(console.log({ departureloc }));
});
}
我错过什么了吗?还是我错了?任何关于如何正确操作的建议都将不胜感激。谢谢
实际JSON来自:
const departureloc = responseJson4.routes[0].legs[0].steps[1];
console.log(departureloc);
Object {
"distance": Object {
"text": "3.1 km",
"value": 3129,
},
"duration": Object {
"text": "21 mins",
"value": 1260,
},
"end_location": Object {
"lat": 52.92222599999999,
"lng": -1.471283,
},
"html_instructions": "Bus towards Derby",
"polyline": Object {
"points": "_f{aIzu_HsPw@eHgW_IkOmHcPoLiNgKxQwHvL{LxKuK`G{AqEJoPcU`A",
},
"start_location": Object {
"lat": 52.900963,
"lng": -1.478217,
},
"transit_details": Object {
"arrival_stop": Object {
"location": Object {
"lat": 52.92222599999999,
"lng": -1.471283,
},
"name": "Bus Station (Bay 19)",
},
"arrival_time": Object {
"text": "4:14pm",
"time_zone": "Europe/London",
"value": 1524669240,
},
"departure_stop": Object {
"location": Object {
"lat": 52.900963,
"lng": -1.478217,
},
"name": "Randolph Road",
},
"departure_time": Object {
"text": "3:52pm",
"time_zone": "Europe/London",
"value": 1524667961,
},
"headsign": "Derby",
"line": Object {
"agencies": Array [
Object {
"name": "Arriva Midlands",
"url": "http://www.traveline.info/",
},
],
"color": "#11416d",
"name": "Sapphire 38",
"text_color": "#ffffff",
"vehicle": Object {
"icon": "//maps.gstatic.com/mapfiles/transit/iw2/6/bus2.png",
"name": "Bus",
"type": "BUS",
},
},
"num_stops": 12,
},
"travel_mode": "TRANSIT",
}
由于
departureloc
是一个对象
,因此不能在其上使用.map
map()
方法创建一个新数组,其结果是对调用数组的中的每个元素调用提供的函数
如果需要在对象上映射,请使用,因为它返回给定对象的属性名称的数组,并基于键使用设置状态
并添加一个不将未定义的值作为
Object.keys(departureloc).map(value => {
if(departureloc[value] && departureloc[value].lat) {
return //...
}
}
谢谢你的回复,我正在按照你的建议做,但仍然得到相同的错误,这是我的尝试:let-bussocoords=Object.keys(responseJson4.routes[0].legs[0].steps[1]).map((结果)=>{return({lation:console.log(output.defession_-stop.location.lat),//经度:output.defession_-stop.location.lng,});//this.setState(console.log({defessionreloc}));}
如果对象类似于您发布的第二个json
,那么应该是正确的。我已经用传统的实际json更新了我上面的帖子。这是我更新后的代码let-bussoords=Object.keys(responseJson4.routes[0].legs[0].steps[1].department\u-stop.location.map((output)=>{return({纬度:console.log(output.lat),//经度:output.department\u-stop.location.lng,})
但是我收到了这个错误:`[Unhandled promise rejection:TypeError:undefined不是一个对象(正在评估'responseJson4.routes[0].legs[0].steps[1].Deeption\u stop.location')]`试试这个object.keys(token.map)(value=>{console.log(token[value].lat)})
其中token
是您的departureloc
并检查日志,如果它返回latticude。如果您不想返回未定义的值,则需要添加一个条件并检查它们是否未定义