Ошибка типа: undefined не является объектом (оценивается как this.state.departure.loc.map) в собственных картах React - PullRequest
0 голосов
/ 27 апреля 2018

Я получаю свои данные из Google Directions и потому, как был настроен ответ 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.4751044,
        },
        "southwest": Object {
          "lat": 52.900484,
          "lng": -1.4801554,
        },
      },
      "copyrights": "Map data ©2018 Google",
      "legs": Array [
        Object {
          "distance": Object {
            "text": "3.1 km",
            "value": 3137,
          },
          "duration": Object {
            "text": "38 mins",
            "value": 2309,
          },
          "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.900484,
            "lng": -1.4801443,
          },
          "steps": Array [
            Object {
              "distance": Object {
                "text": "3.1 km",
                "value": 3137,
              },
              "duration": Object {
                "text": "38 mins",
                "value": 2309,
              },
              "end_location": Object {
                "lat": 52.9242042,
                "lng": -1.4756769,
              },
              "html_instructions": "Walk to Full St, Derby DE1 3AF, UK",
              "polyline": Object {
                "points": "_c{aIza`Hm@BEyHC_AyAk@iCw@KCGAGAMBSFE@iBz@C@E@QDe@TMFUHWJm@TIm@k@_Em@yDuE`BIDw@SEPCJGPINILEDGFWTcBbAwB~@WJ]PIDOHWNMJ?@@??@?@?@A??@?@?@A??@?@A??@A?A??@AAA?A??AA??A?AA??AI@EBGBOHo@XGBIDKBGBG@G@G@OBu@JG@KBID?A?AA??AA??AA?A?A??@A??@A??@?@?@]UGG}AiAcAu@g@a@kAw@c@Wu@_@c@U}@e@y@g@WQKGGEEAWGc@Iq@EW?k@?M@g@FoBPq@J[HSDIBGB]Ja@RcAdAYX{AdAq@Ry@Hu@BU?yA@g@AYAAIAG?CAECGACCGEEEECCEAICK?C@A@A?C@C@EDCBABCDABABCDGYgBkBwBsBw@y@GCGAYe@cAqACCAECE?C?G@Kc@NC@gBj@MDKDaBdAq@^GHCFCFCNCFEHEFwCZi@@MAMCIIMOSa@Yq@Oc@Qk@CEKc@EQWuAG?ICCIAKAKKFIDIFE@OPONMLa@h@?@",
              },
              "start_location": Object {
                "lat": 52.900484,
                "lng": -1.4801443,
              },
              "steps": Array [
                Object {
                  "distance": Object {
                    "text": "26 m",
                    "value": 26,
                  },
                  "duration": Object {
                    "text": "1 min",
                    "value": 17,
                  },
                  "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.900484,
                    "lng": -1.4801443,
                  },
                  "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": "0.3 km",
                    "value": 332,
                  },
                  "duration": Object {
                    "text": "4 mins",
                    "value": 223,
                  },
                  "end_location": Object {
                    "lat": 52.90362829999999,
                    "lng": -1.4785171,
                  },
                  "html_instructions": "Turn <b>left</b> onto <b>St Thomas Rd</b>",
                  "maneuver": "turn-left",
                  "polyline": Object {
                    "points": "wd{aIdv_HyAk@iCw@KCGAGAMBSFE@iBz@C@E@QDe@TMFUHWJm@T",
                  },
                  "start_location": Object {
                    "lat": 52.9007561,
                    "lng": -1.4782714,
                  },
                  "travel_mode": "WALKING",
                },
                Object {
                  "distance": Object {
                    "text": "0.2 km",
                    "value": 153,
                  },
                  "duration": Object {
                    "text": "2 mins",
                    "value": 104,
                  },
                  "end_location": Object {
                    "lat": 52.90412999999999,
                    "lng": -1.4763973,
                  },
                  "html_instructions": "Turn <b>right</b> to stay on <b>St Thomas Rd</b>",
                  "maneuver": "turn-right",
                  "polyline": Object {
                    "points": "uv{aIvw_HIm@k@_Em@yD",
                  },
                  "start_location": Object {
                    "lat": 52.90362829999999,
                    "lng": -1.4785171,
                  },
                  "travel_mode": "WALKING",
                },
                Object {
                  "distance": Object {
                    "text": "0.1 km",
                    "value": 129,
                  },
                  "duration": Object {
                    "text": "2 mins",
                    "value": 103,
                  },
                  "end_location": Object {
                    "lat": 52.9052488,
                    "lng": -1.4769249,
                  },
                  "html_instructions": "Turn <b>left</b> onto <b>Portland St</b>",
                  "maneuver": "turn-left",
                  "polyline": Object {
                    "points": "yy{aInj_HuE`BID",
                  },
                  "start_location": Object {
                    "lat": 52.90412999999999,
                    "lng": -1.4763973,
                  },
                  "travel_mode": "WALKING",
                },
                Object {
                  "distance": Object {
                    "text": "32 m",
                    "value": 32,
                  },
                  "duration": Object {
                    "text": "1 min",
                    "value": 24,
                  },
                  "end_location": Object {
                    "lat": 52.9055291,
                    "lng": -1.4768217,
                  },
                  "html_instructions": "Slight <b>right</b> at <b>Goodale St</b>",
                  "maneuver": "turn-slight-right",
                  "polyline": Object {
                    "points": "y`|aIvm_Hw@S",
                  },
                  "start_location": Object {
                    "lat": 52.9052488,
                    "lng": -1.4769249,
                  },
                  "travel_mode": "WALKING",
                },
                Object {
                  "distance": Object {
                    "text": "0.4 km",
                    "value": 418,
                  },
                  "duration": Object {
                    "text": "5 mins",
                    "value": 325,
                  },
                  "end_location": Object {
                    "lat": 52.9089381,
                    "lng": -1.4789711,
                  },
                  "html_instructions": "Turn <b>left</b> onto <b>Pear Tree Rd</b><div style=\"font-size:0.9em\">Go through 1 roundabout</div>",
                  "maneuver": "turn-left",
                  "polyline": Object {
                    "points": "qb|aIbm_HEPCJGPINILEDGFWTcBbAwB~@WJ]PIDOHWNMJ?@@??@?@?@A??@?@?@A??@?@A??@A?A??@AAA?A??AA??A?AA??AI@EBGBOHo@XGBIDKBGBG@G@G@OBu@JG@KBID",
                  },
                  "start_location": Object {
                    "lat": 52.9055291,
                    "lng": -1.4768217,
                  },
                  "travel_mode": "WALKING",
                },
                Object {
                  "distance": Object {
                    "text": "1.0 km",
                    "value": 984,
                  },
                  "duration": Object {
                    "text": "13 mins",
                    "value": 760,
                  },
                  "end_location": Object {
                    "lat": 52.9173185,
                    "lng": -1.4781371,
                  },
                  "html_instructions": "At the roundabout, take the <b>1st</b> exit onto <b>Normanton Rd</b>",
                  "maneuver": "roundabout-left",
                  "polyline": Object {
                    "points": "{w|aIpz_H?A?AA??AA??AA?A?A??@A??@A??@?@?@]UGG}AiAcAu@g@a@kAw@c@Wu@_@c@U}@e@y@g@WQKGGEEAWGc@Iq@EW?k@?M@g@FoBPq@J[HSDIBGB]Ja@RcAdAYX{AdAq@Ry@Hu@BU?yA@g@AYA",
                  },
                  "start_location": Object {
                    "lat": 52.9089381,
                    "lng": -1.4789711,
                  },
                  "travel_mode": "WALKING",
                },
                Object {
                  "distance": Object {
                    "text": "0.3 km",
                    "value": 272,
                  },
                  "duration": Object {
                    "text": "3 mins",
                    "value": 207,
                  },
                  "end_location": Object {
                    "lat": 52.9193378,
                    "lng": -1.4764257,
                  },
                  "html_instructions": "At the roundabout, take the <b>3rd</b> exit onto <b>Babington Ln</b>",
                  "maneuver": "roundabout-left",
                  "polyline": Object {
                    "points": "gl~aIju_HAIAG?CAECGACCGEEEECCEAICK?C@A@A?C@C@EDCBABCDABABCDGYgBkBwBsBw@y@GCGA",
                  },
                  "start_location": Object {
                    "lat": 52.9173185,
                    "lng": -1.4781371,
                  },
                  "travel_mode": "WALKING",
                },
                Object {
                  "distance": Object {
                    "text": "82 m",
                    "value": 82,
                  },
                  "duration": Object {
                    "text": "1 min",
                    "value": 54,
                  },
                  "end_location": Object {
                    "lat": 52.91985400000001,
                    "lng": -1.4756332,
                  },
                  "html_instructions": "Slight <b>right</b> to stay on <b>Babington Ln</b>",
                  "maneuver": "turn-slight-right",
                  "polyline": Object {
                    "points": "{x~aItj_HYe@cAqACCAECE?C?G@K",
                  },
                  "start_location": Object {
                    "lat": 52.9193378,
                    "lng": -1.4764257,
                  },
                  "travel_mode": "WALKING",
                },
                Object {
                  "distance": Object {
                    "text": "0.2 km",
                    "value": 217,
                  },
                  "duration": Object {
                    "text": "2 mins",
                    "value": 144,
                  },
                  "end_location": Object {
                    "lat": 52.9216227,
                    "lng": -1.4768472,
                  },
                  "html_instructions": "Turn <b>left</b> onto <b>St Peters St</b>",
                  "maneuver": "turn-left",
                  "polyline": Object {
                    "points": "a|~aIte_Hc@NC@gBj@MDKDaBdAq@^GHCFCFCNCFEHEF",
                  },
                  "start_location": Object {
                    "lat": 52.91985400000001,
                    "lng": -1.4756332,
                  },
                  "travel_mode": "WALKING",
                },
                Object {
                  "distance": Object {
                    "text": "0.3 km",
                    "value": 266,
                  },
                  "duration": Object {
                    "text": "3 mins",
                    "value": 186,
                  },
                  "end_location": Object {
                    "lat": 52.9234756,
                    "lng": -1.4752851,
                  },
                  "html_instructions": "Slight <b>right</b> onto <b>Corn Market</b>",
                  "maneuver": "turn-slight-right",
                  "polyline": Object {
                    "points": "cg_bIhm_HwCZi@@MAMCIIMOSa@Yq@Oc@Qk@CEKc@EQWuA",
                  },
                  "start_location": Object {
                    "lat": 52.9216227,
                    "lng": -1.4768472,
                  },
                  "travel_mode": "WALKING",
                },
                Object {
                  "distance": Object {
                    "text": "0.1 km",
                    "value": 100,
                  },
                  "duration": Object {
                    "text": "1 min",
                    "value": 74,
                  },
                  "end_location": Object {
                    "lat": 52.9242042,
                    "lng": -1.4756769,
                  },
                  "html_instructions": "At the roundabout, take the <b>2nd</b> exit onto <b>Full St</b><div style=\"font-size:0.9em\">Destination will be on the right</div>",
                  "maneuver": "roundabout-left",
                  "polyline": Object {
                    "points": "wr_bIpc_HG?ICCIAKAKKFIDIFE@OPONMLa@h@?@",
                  },
                  "start_location": Object {
                    "lat": 52.9234756,
                    "lng": -1.4752851,
                  },
                  "travel_mode": "WALKING",
                },
              ],
              "travel_mode": "WALKING",
            },
          ],
          "traffic_speed_entry": Array [],
          "via_waypoint": Array [],
        },
      ],
      "overview_polyline": Object {
        "points": "_c{aIza`Hm@BEyHC_AyAk@uC{@OCa@JoB|@IBw@ZiBr@u@mFm@yDuE`BIDw@SI\\Q`@OR_@\\cBbAwB~@u@\\YNe@\\@??BA@?DCBE@EEAAg@RmAf@yB^IBAAAACACBA@?@e@[uGyE{DsBeBgA]IuAOcA?u@HoBPq@Jo@NQF]Ja@R}A~A{AdAq@RoBLoB@aACCQGUSWOEO@KDORCFCDGY_F_F_A}@GAYe@gAuAEW@Kc@NkBl@YJsCdBKPGVIPEFwCZw@?WMa@q@i@uAg@gBWuAG?ICCICWULOH_@`@o@x@",
      },
      "summary": "Normanton Rd",
      "warnings": Array [
        "Walking directions are in beta.    Use caution – This route may be missing sidewalks or pedestrian paths.",
      ],
      "waypoint_order": Array [],
    },
  ],
  "status": "OK",
}

Я пытаюсь получить данные из данных о транзите, которые имеют значения широты и долготы, которые я пытаюсь получить, чтобы иметь возможность просматривать это на карте с помощью MapView в React native, и я считаю, что мне это удалось так как это моя попытка получить данные, устанавливающие состояние:

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 departureloc1 = responseJson4.routes[0].legs[0].steps[1];
                //console.log(departureloc1)
                const departureloc = responseJson4.routes[0].legs[0].steps[1].transit_details.departure_stop.location;
                console.log(departureloc);

                const stopmarkers = Object.keys(departureloc).map(value => {
                    // noinspection JSAnnotator
                    if (typeof departureloc['lat'] === undefined && typeof departureloc['lng'] === undefined) {
                        console.log('null');
                    } else {
                        return {
                            latlng: {
                                latitude: departureloc['lat'],
                                longitude: departureloc['lng']

                            }

                            }

                        }
                    this.setState({ departureloc: stopmarkers });
                });
            })
    }

печать приведенного выше вызова извлечения приведет к этому результату JSON

Object {
  "lat": 52.90736,
  "lng": -1.453532,
}

Следующий раздел - это моя функция рендеринга, которая имеет вид карты в моей попытке установить маркеры.

<View style={styles.container}>
                <Mainlogo/>
                <TextInput style={styles.boxInput} underlineColorAndroid='rgba(0,0,0,0)' placeholder="Going To?"
                           underlineColorAndroid='transparent'
                           onChangeText={(dest) => this.setState({goingto : dest})}
                />

                <TouchableOpacity style={styles.button} onPress={this.fetchDirections.bind(this)}>
                    <Text style={styles.textButton}> Go {this.props.type}</Text>
                </TouchableOpacity>

  {this.state.departureloc.map(marker => (
                        <MapView.Marker
                            coordinate={marker.latlng}
                            image={require('../img/busstop1.png')}

                        />

                    ))}

                </MapView>  : <Text style={{fontWeight: 'bold', color: '#546e7a', textAlign: 'center'}}>Please wait.. loading</Text>}


            </View>

На этом этапе у меня нет успеха, и вместо этого я не могу обойти эту ошибку. enter image description here

Я очень новичок в этом, и любой, кто может направить меня и дать подсказки на правильном пути, был бы очень признателен, спасибо

1 Ответ

0 голосов
/ 27 апреля 2018

Во время рендеринга this.state.departureloc не устанавливается, вероятно, потому что render() вызывается до того, как ваши вызовы API возвращаются. Попробуйте установить this.state.departureloc = [] в функции constructor(props).

Также не рекомендуется перебирать рендеринг JSX. Попробуйте извлечь этот рендеринг до вашего оператора return и сохранить его в переменной.

...