API геокодирования - адрес не обновляется до lat long, а сохраняется в базе данных в виде текста почтового индекса - PullRequest
Новая
       44

API геокодирования - адрес не обновляется до lat long, а сохраняется в базе данных в виде текста почтового индекса

0 голосов
/ 11 февраля 2020

Я пытаюсь использовать API геокодирования Google, чтобы превратить почтовый индекс в длинные координаты широты.

Кажется, он работает, когда я console.log.state, однако текст почтового индекса, например, 'TW135QZ' сохраняются в базе данных вместо координат с длинными шинами.

Кто-нибудь может понять, почему не сохраняются шнуры с длинными шинами? Я застрял сейчас>. <</p>

Основной бит кода: 

  onCreateCat = (e, authUser) => {
    Geocode.fromAddress(this.state.address).then(
      response => {
        const { lat, lng } = response.results[0].geometry.location;
        this.setState({address: lat + ',' + lng});
      },
      error => {
        console.error(error);
      }
    )
    .then(
      this.props.firebase.cats().push({
        text: this.state.text,
        image: 'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9',
        userId: authUser.uid,
        address: this.state.address,
      })
    )
    e.preventDefault();
  }

Полный код: 

const INITIAL_STATE = {
  text: '',
  address: ''
}

class AddCat extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      ...INITIAL_STATE
    }
  }

  componentDidMount() {
    // set Google Maps Geocoding API for purposes of quota management. Its optional but recommended.
    Geocode.setApiKey(process.env.REACT_APP_GOOGLEKEY);
    // set response language. Defaults to english.
    Geocode.setLanguage("en");
    // set response region. Its optional.
    // A Geocoding request with region=es (Spain) will return the Spanish city.
    Geocode.setRegion("es");
    // Enable or disable logs. Its optional.
    Geocode.enableDebug();
    // Get latidude & longitude from address.
  }

  onCreateCat = (e, authUser) => {
    Geocode.fromAddress(this.state.address).then(
      response => {
        const { lat, lng } = response.results[0].geometry.location;
        this.setState({address: lat + ',' + lng});
      },
      error => {
        console.error(error);
      }
      ).then(
      this.props.firebase.cats().push({
        text: this.state.text,
        image: 'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9',
        userId: authUser.uid,
        address: this.state.address,
      })
    )
    e.preventDefault();
  }

  onChangeText = e => {
    this.setState({ text: e.target.value });
  };

  onChangeAddress = e => {
    this.setState({ address: e.target.value });
  };

  render() {

    const { text, address } = this.state;

    console.log(this.state);

    return (
      <div>
      <h1>Add cat</h1>
      <AuthUserContext.Consumer>
        {authUser => (
          <div>
            <form onSubmit={e => this.onCreateCat(e, authUser)}>
              <input
                type="text"
                value={text}
                onChange={this.onChangeText}
                placeholder="Cats Name"
              />
              <input
                name="address"
                value={address}
                onChange={this.onChangeAddress}
                type="text"
                placeholder="Cats Postcode">
              </input>
              <button type="submit">Send</button>
            </form>
          </div>
        )}
       </AuthUserContext.Consumer>
       </div>
    );

  }

}

const condition = authUser => !!authUser;

export default withAuthorization(condition)(AddCat);
...