Проблема в setState в компоненте реакции, обновляющем данные, полученные API карт Google

Question

Я пытаюсь установить состояние адреса и координат, как указано в "response-places-autocomplete". Я уже сохранил эти компоненты, единственная проблема заключается в их обновлении. Однако изменения не обновляются, и хотя программа компилируется, как только я выбираю место, происходит сбой. Специально для getLatLng мне не хватает документации, чтобы понять, нужен ли мне доступ к другому компоненту внутри этого. Как мне обновить состояние адреса и координат с помощью handleSelect ?. Спасибо!

import React, { Component }  from "react";
import PlacesAutocomplete, {
  geocodeByAddress,
  getLatLng
} from "react-places-autocomplete";

export default class Itinerary extends Component {
  constructor(props) {
    super(props);

    this.state = {
      address:"",
      coordinates:{lat: null,lng: null}
    };

  }

  Create2DArray(rows,columns) {
    var x = new Array(rows);
    for (var i = 0; i < rows; i++) {
        x[i] = new Array(columns);
    }
    return x;
 }

 handleChange = address => {
  this.setState({ address });
};


handleSelect = address => {
  const results = geocodeByAddress(address);
  const latLng = getLatLng(results[0]);

  this.setState({ coordinates: latLng });

};

  render() {

  return (
    <div className="container">
    <div className="row">
    <div className="col-md-6 mt-5 mx-auto">
      <PlacesAutocomplete
        value={this.state.address}
        onChange={this.handleChange}
        onSelect={this.handleSelect}
      >
        {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
          <div>
            <h1>Latitude: {this.state.coordinates.lat}</h1>
            <h1>Longitude: {this.state.coordinates.lng}</h1>

            <input size="50" height="40"{...getInputProps({ placeholder: "Type address" })} />

            <div>
              {loading ? <div>...loading</div> : null}

              {suggestions.map(suggestion => {
                const style = {
                  backgroundColor: suggestion.active ? "#41b6e6" : "#fff"
                };


                return (
                  <div {...getSuggestionItemProps(suggestion, { style })}>
                    {suggestion.description}
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </PlacesAutocomplete>
    </div>
    </div>
    </div>
  );
  }
}

Answer 1

geocodeByAddress и getLatLng являются асинхронными функциями, поэтому вы должны дождаться этих функций до получения данных (подробнее о geocodeByAddress здесь ). В handleSelect, results[0] не определено при выборе, поэтому ваш компонент разбился. Вы должны попробовать это:

export default class Itinerary extends Component {
  ...
  handleSelect = async address => {
    const results = await geocodeByAddress(address);
    const latLng = await getLatLng(results[0]);

    this.setState({ coordinates: latLng });
  };
  ...
}