this.props 不是一个函数 - 反应形式

Question

我正在尝试在我的反应表单的输入中使用谷歌地图地址自动完成功能。

当我单击它返回的地址时，输入的状态不会更新。

import React from "react";
import { Field } from "formik";
/* 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: ["address"] }
    );
    this.autocomplete.addListener("place_changed", this.handlePlaceChanged);
  }


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

  render() {
    return (
      <Field
        innerRef={this.autocompleteInput}
        id="autocomplete"
        type="text"
        name="address"
        className="form-control"
        placeholder=""
      />
    );
  }
}

export default SearchBar;

如何更新状态以存储所选地址？

编辑以显示我的搜索栏组件的使用方式：

import React from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
import SearchBar from "./Google";


const LoginSchema = Yup.object().shape({
  fName: Yup.string().required("Please enter your first name"),
  address: Yup.string().required("invalid address"),
});

class Basic extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-lg-12">
            <Formik
              initialValues={{
                fName: "",
                postal: "",
              }}
              validationSchema={LoginSchema}
              onSubmit={(values) => {
                console.log(values);
                console.log("form submitted");
              }}
            >
              {({ touched, errors, isSubmitting, values }) =>
                !isSubmitting ? (
                  <div>
                    <div className="row mb-5">
                      <div className="col-lg-12 text-center">
                        <h1 className="mt-5">LoKnow Form</h1>
                      </div>
                    </div>

                    <Form>

                      <div className="form-group">
                        <label htmlFor="fName">First Name</label>
                        <Field
                          type="text"
                          name="fName"
                          className={`mt-2 form-control
                    ${touched.fName && errors.fName ? "is-invalid" : ""}`}
                        />

                        <ErrorMessage
                          component="div"
                          name="fName"
                          className="invalid-feedback"
                        />
                      </div>

                      <div className="form-group">
                        <label htmlFor="address">Address</label>
                      
<SearchBar />

                        <ErrorMessage
                          component="div"
                          name="address"
                          className="invalid-feedback"
                        />

                      </div>



                      <button
                        type="submit"
                        className="btn btn-primary btn-block mt-4"
                      >
                        Submit
                      </button>
                    </Form>
                  </div>
                ) : (
                  <div>
                    <h1 className="p-3 mt-5">Form Submitted</h1>

                    <div className="alert alert-success mt-3">
                      Thank for your connecting with us.
                    </div>
                  </div>
                )
              }
            </Formik>
          </div>
        </div>
      </div>
    );
  }
}

export default Basic;

包括更多信息，以便堆栈溢出可以让我发布

Answer 1

import Geocode from "react-geocode";

handlePlaceChanged() {
    const place = this.autocomplete.getPlace().formatted_address;
    // issue here
    // this.props.onPlaceLoaded(place);
    // issue here
    Geocode.fromAddress(place).then( response => {
       const { lat, lng } = response.results[0].geometry.location;

       // you need this :
       this.setState({
           place: place,
           lat: lat,
           lng: lng
       });
  },
  error => {
    console.error(error);
  }
);


}