google maps API 收到的 React 组件更新数据中的 setState 问题

Question

我正在尝试设置 "react-places-autocomplete" 给出的地址和坐标的状态。我已经存储了这些组件，唯一的问题是更新它但是，更改没有更新，即使程序在我 select 崩溃的地方立即编译。特别是对于 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 here）。在 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 });
  };
  ...
}

google maps API 收到的 React 组件更新数据中的 setState 问题

Problem in setState in react component updating data received by google maps API

google-maps

setstate

reactjs

googleplacesautocomplete