Question

我在我的react代码中使用google place自动完成api。当我将此代码保存在单独的文件中并在另一个组件中调用此组件时，它运行正常。但是当我将place search输入字段与其他字段组合成表单时不起作用。当我与表单中的其他字段结合使用时会出什么问题？

此代码

import React from "react";
/* global google */

class SearchBar extends React.Component {
constructor(props) {
 super(props);
 this.autocompleteInput = React.createRef();
 this.autocomplete = null;
 this.handlePlaceChanged = this.handlePlaceChanged.bind(this);}

componentDidMount() {
 this.autocomplete = new google.maps.places.Autocomplete(this.autocompleteInput.current,
    {"types": ["geocode"]});

 this.autocomplete.addListener('place_changed', this.handlePlaceChanged);
}

handlePlaceChanged(){
 const place = this.autocomplete.getPlace();
 this.props.onPlaceLoaded(place);
}

render() {
 return (
    <input ref={this.autocompleteInput}  id="autocomplete" placeholder="Enter your address"
     type="text"></input>
 );
}
}

此输出： in seperate file

集成其他文件（表单输入）后的

代码

import React from "react";
import Geocode from "react-geocode";
import DatePicker from 'react-datepicker';
import Scrollbars from 'react-custom-scrollbars';
require('react-datepicker/dist/react-datepicker.css');

// set Google Maps Geocoding API for purposes of quota management. Its optional but 
recommended.
Geocode.setApiKey("API_KEY");
/* global google */

export default class Checkout extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    locality: "",
    lat : 0,
    lng: 0,
    otherState...
  }
  this.autocompleteInput = React.createRef();
  this.autocomplete = null;
  this.handlePlaceChanged = this.handlePlaceChanged.bind(this);
}

componentDidMount() {
  this.autocomplete = new google.maps.places.Autocomplete(this.autocompleteInput.current,
    {"types": ["geocode"]});

  this.autocomplete.addListener('place_changed', this.handlePlaceChanged);

}

handlePlaceChanged(){
  const place = this.autocomplete.getPlace().formatted_address;
  //this.props.onPlaceLoaded(place);
  this.setState({locality: place})
  Geocode.fromAddress(this.state.locality).then(
  response => {
    const { lat, lng } = response.results[0].geometry.location;
    console.log(lat, lng);
    this.setState({
        lat: lat,
        lng: lng
    })
  },
  error => {
    console.error(error);
  }
);
}
render() {
let publicUrl = process.env.PUBLIC_URL+'/'
let items = JSON.parse(localStorage.getItem("items"));

return (
  
// checkout page
    <div className="contact-area pd-top-20 pd-bottom-65">
      <div className="container">
            <form className="contact-form-wrap contact-form-bg" onSubmit={e => 
             this.handleSubmit(e)}>
              <h4>Checkout</h4>
                ...other input feilds
               <div className="row">
            
               <div className="col-10 col-md-11" >
               <h4>Select/Add new address</h4>

               <div className="rld-single-input">
                <label>Enter new address</label>
                <input className="mb-2" ref={this.autocompleteInput}  id="autocomplete" 
                placeholder="Enter Locality"
                type="text"></input>
                <input placeholder="Enter flat no./Bilding name" onChange={(e) => 
                 this.handleLandmark(e)}/>
                
                  </div>
              </div>
            </div>
          </div>            
         </form>

Output after adding all code into one file

Answer 1

在调用this.state之后立即访问this.setState({...})是不能保证的操作，因为它是异步的read this react FAQ。

因此，我建议您做的是将回调作为第二个参数传递给this.setState(newState, callback)，在您从回调内部访问状态时，回调应包含Geocode.fromAddress(...)的整个主体。

谷歌自动完成功能使api反应

1 个答案: