堆栈内存溢出
  繁体   English   中英

未处理的承诺拒绝：TypeError：未定义不是一个函数，当在react native中为setState映射时会发生'departureloc.map'评估

[英]Unhandled promise rejection: TypeError: undefined is not a function evaluating 'departureloc.map' occurs when mapping for setState in react native

 原文  2018-04-25 08:42:08  7   1    javascript/ google-maps/ react-native/ google-direction

问题描述

我成功通过Google Directions的JSON响应，因为我尝试从json响应获取运输信息，成功时最初看起来像这样。 

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...

要调试我的代码，我的提取功能包括console.log（），我尝试获取我需要的数据，我特别需要获取出发信息，并且我认为我成功了，这是我的尝试： 

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

上面的代码导致以下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",
    }

我正在获取出发地点的数据，因此我可以setState（）。 经过最初尝试使用.map（）以便可以获取经度和纬度值的尝试之后，我无法做到这一点，因为我得到了以下信息： [Unhandled promise rejection: TypeError: undefined is not a function (evaluating '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];
                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",
}

1 个解决方案

解决方案1
 2 已采纳  2018-04-25 09:33:24

由于departureloc是一个Object ，因此不能在其上使用.map

map()方法创建一个新数组，其结果是在调用数组中的每个元素上调用提供的函数。

如果需要map到Object ，请使用Object.keys因为它会返回给定object's属性名称的数组，并根据key'属性使用setState 。

并添加条件以不返回未定义的值 

Object.keys(departureloc).map(value => {
  if(departureloc[value] && departureloc[value].lat) {
     return //...
  }
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 React Native：未处理的promise promise：TypeError：undefined不是对象（评估&#39;response.json&#39;） React Native：可能的未处理的承诺拒绝（id：0）：TypeError：undefined不是对象 反应原生：未处理的承诺拒绝：类型错误：未定义不是对象 React Native 问题：[未处理的 promise 拒绝：TypeError：f 不是 function。 （在 'f()' 中，'f' 未定义）] [未处理的承诺拒绝：类型错误：未定义不是对象（评估&#39;_ref.about&#39;）] react-native expo 错误：未处理 promise 拒绝：TypeError：null 不是 object（正在评估“RNAlarmNotification.scheduleAlarm”） [未处理的 promise 拒绝：TypeError: undefined is not an object（评估'this.state.result.map'）] [未处理的承诺拒绝：类型错误：未定义不是对象（评估“response.data”）] 未处理的 Promise 拒绝：类型错误：未定义不是 object（正在评估“data.date”） [未处理的承诺拒绝：TypeError：未定义不是一个函数（正在评估&#39;_expo2.default.loadAsync&#39;）]
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM