я могу получить данные из API карты Google, но я не могу обновить состояние с данными

Question

Я пытаюсь получить геокод из Google API, сохранить его в состоянии, передать его компоненту GoogleMap.Я получаю геокод как объект правильно (например, {lat: 37.5397407, lng: 126.9895666}). Однако состояние не обновляется, и не вызывается "console.log (this.state)".Я сделал что-то не так?

import React from "react";
import PeopleInfoStyle from "../../../styles/presentational/PeopleInfoStyle";
import Carousel from "../../containers/Carousel/Carousel";
import GoogleMap from "../../presentational/GoogleMap/GoogleMap";

class PeopleInfo extends React.Component {
  state = {};

  componentDidMount() {
    let geoData = {};
    fetch(
      `https://maps.googleapis.com/maps/api/geocode/json?address=${
        this.props.person.address
      }&key="SECRET_KEY`
    )
      .then(res => res.json())
      .then(data => {
        geoData = data.results[0].geometry.location;
        console.log(geoData); // {lat: 37.5397407, lng: 126.9895666}
      })
      .catch(err => console.log(err));
    this.setState({ geoLocation: geoData }, ()=>{console.log(state)});
  }
  render() {
    const person = this.props.person;
    const images = [
      <img key={0} alt="" src={person.imgURL} />,
      ...person.subImgURLs.map((url, index) => {
        return <img alt="" src={url} key={index + 1} />;
      })
    ];

    return (
      <PeopleInfoStyle>
        <Carousel>{images}</Carousel>
            {!this.state.getLocation ? null : (
                <GoogleMap
                  id="map"
                  option={{
                    center: {
                      lat: this.state.geoLocation.lat,
                      lng: this.state.geoLocation.lng
                    },
                    zoom: 8
                  }}
                  onMapLoad={map => {
                    const market = new window.google.maps.Marker({
                      position: {
                        lat: this.state.geoLocation.lat,
                        lng: this.state.geoLocation.lng
                      },
                      map: map,
                      title: "business"
                    });
                  }}
                />
        </PeopleInfoStyle>
    );
  }
}

export default PeopleInfo;

Answer 1

Краткий ответ - состояние не обновляется с помощью ответа на запрос выборки.

Состояние должно быть обновлено после завершения api-запроса, то есть внутри одного из обратных вызовов then..

Как и в приведенном выше исходном коде, setState вызывается вне обещания (в методе componentDidMount), так как обещание, являющееся асинхронным по своей природе, не завершится, как только вы сделаете вызов и затем запустите обещание,Интерпретатор продолжит вызывать setState с geodata={}.

. Надеюсь, теперь вы поняли утилиту .then(()=>{}).Они гарантируют выполнение определенного кода после успешного выполнения Обещания.

Еще один указатель, когда вы хотите получить доступ к состоянию, используйте this.state, так как это свойство экземпляра, а this используется для доступа к этим свойствам.внутри класса.

Итак, правильный вызов setState с обратным вызовом должен выглядеть следующим образом - this.setState({geolocation: geodata}, ()=>{console.log(this.state)}).

Надеюсь, это поможет.