有没有办法为 React Google Places AutoComplete 设置初始值？

Question

Using this library -https://tintef.github.io/react-google-places-autocomplete/docs/ -I have -

  <GooglePlacesAutocomplete
      apiKey={'someKey'}
      autocompletionRequest={{
          componentRestrictions: {
              country: ['uk']
          }
      }}
      selectProps={{
          value: address,
          onChange: (o) => {
              let placeId = o["value"]["place_id"];
              setAddress(o);
              formik.setFieldValue("googlePlaceId", placeId);
          }
      }}
  />

What do I need to pass as the value of "address" for there to be an initial value?

I've tried {label: "some address", place_id: "ChIJNYiUp8ROeEgRikq4Ws76OpU"} and passing the object returned by using the utility geocodeByPlaceId. The former works in so far has it shows the label in the input field upon initialisation but it appears broken. For example when I try and delete the value with backspace my react app crashes with this error in the console -

Uncaught TypeError: Cannot read property 'place_id' of undefined
    at Object.getOptionValue (index.es.js:30)
    at cr (index.es.js:30)
    at eval (index.es.js:30)
    at Array.some (<anonymous>)
    at lr (index.es.js:30)
    at or (index.es.js:30)
    at eval (index.es.js:30)
    at Array.map (<anonymous>)
    at rr (index.es.js:30)
    at eval (index.es.js:30)

Answer 1

Annoyingly the documentation for this library refers one to the documentation for another, react-select.

This is now my how my component looks -

                            <GooglePlacesAutocomplete
                                apiKey={''}
                                autocompletionRequest={{
                                    componentRestrictions: {
                                        country: ['uk']
                                    }
                                }}
                                selectProps={{
                                    defaultInputValue: formik.status["addressLabel"],
                                    isClearable: true,
                                    value: address,
                                    onChange: (o) => {
                                        let placeId = "";
                                        if(o){
                                            placeId = o["value"]["place_id"];
                                        }
                                        setAddress(o);
                                        formik.setFieldValue("googlePlaceId",placeId);
                                    }
                                }}
                            />

So in a higher component I have -

const [address, setAddress] = useState();

And the default initial value is set like this (using formik) -

                            <Formik
                                initialValues={initialValues}
                                validationSchema={validationSchema}
                                // validationSchema={{}}
                                onSubmit={(values, actions) => {
                                    actions.setSubmitting(false);
                                    submitHandler(values, actions)
                                }}
                                initialStatus={{
                                    addressLabel: addressLabel
                                }}
                            >
                                {
                                    formik => {
                                        return (
                                            <Form formik={formik} {...formProps} />
                                        )
                                    }
                                }
                            </Formik>

Answer 2

This is best achieved following the docs of React-Select as suggested by the creator. But to achive what you want to do, you'll need React State.

import { useState, useEffect } from "react";
import GooglePlacesAutocomplete from "react-google-places-autocomplete";

const Places=()=>{
  const [data, setData] = useState("");
//our default data

useEffect(() => {
    data === ""
      ? setData("")
      : setData(data.label);
  }, [data]);
// updating our default data

return(
 <GooglePlacesAutocomplete
                  apiKey={process.env.REACT_APP_MAP_API_KEY}
                  autocompletionRequest={{
                    componentRestrictions: {
                      country: ["ng"], //to set the specific country
                    },
                  }}
                  selectProps={{
                    defaultInputValue: data, //set default value
                    onChange: setData,  //save the value gotten from google
                    placeholder: "Start Destination",
                    styles: {
                      input: (provided) => ({
                        ...provided,
                        color: "#222222",
                      }),
                      option: (provided) => ({
                        ...provided,
                        color: "#222222",
                      }),
                      singleValue: (provided) => ({
                        ...provided,
                        color: "#222222",
                      }),
                    },
                  }}
                  onLoadFailed={(error) => {
                   console.log(error);
                  }}
                />
)
}

export default Places;

We use useEffect to update the defualt value we set on condition that we are getting an actual value. If we're not getting actual value, we're not saving it.