最好按照创建者建议的 React-Select 文档来实现。 但要实现您想要做的事情，您需要 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;

我们使用 useEffect 来更新我们设置的默认值，前提是我们得到了实际值。如果我们没有得到实际值，我们就不会保存它。

令人讨厌的是，这个库的文档引用了另一个库的文档，react-select。

这是我的组件现在的样子 -

<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);
                                    }
                                }}
                            />

所以在更高的组件中我有 -

const [address, setAddress] = useState();

默认初始值设置如下（使用 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>

我通过以下方式解决了这个问题：

import { usePlacesWidget } from 'react-google-autocomplete'

import TextField from '@mui/material/TextField';



const { ref, autocompleteRef } = usePlacesWidget({
    apiKey: googleApiKey,
    options: {
      types: ['address']
    },
    onPlaceSelected: (place) => {
      console.log(place)
      const latitude = place.geometry.location.lat();
      const longitude = place.geometry.location.lng();
      
      console.log(latitude, longitude)
      setFormState(prevState => ({
        ...prevState,
        location: place.formatted_address || "",
        lat: latitude,
        lng: longitude
      }));
    }
  });

  useEffect(()=> {
    if (!isEditing && ref.current !=null)
    {
      const inputElement = ref.current as HTMLInputElement;
      if (initialForm?.location)
      {
        inputElement.value = initialForm?.location
        inputElement.click()
      }
    }
  }, [isEditing, ref])

然后使用它

<TextField 
 label="Location"
 inputRef={ref}
 disabled={!isEditing}
 >
</TextField>

isEditing 和 initialForm 从父组件设置到子组件，基本上 useEffect 会查找 ref 和 isEditing 中的变化，如果 isEditing 为 false，则存在 initialForm.location 值，只需与 HTMLInputElement (ref.current) 交互即可设置值并单击它（此处的单击是绝对必要的，以正确触发 MUI TextField 的输入标签以正确运行）。抱歉，我今天真的很忙，现在无法发布一个好的可重现的代码片段。