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

Question

我成功地通过了 Google 方向的 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",
}

正如它显示的那样 returns 我需要的实际 JSON 信息，我想要交通信息，尤其是 departure_stop 位置，如下所示：

"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",
}

Answer 1

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

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

如果您需要在 Object 上 map，请使用 Object.keys 作为给定 [=18= 的数组 return ] 属性名称 并根据 key' 属性使用 setState。

并添加一个条件不给 return 未定义的值作为

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

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

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

javascript

google-maps

react-native

google-directions-api