这最好按照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>

型

如果你只是想将地址设置为googlePlacesinput的文本。
你可以看看我是如何在这篇文章中做到这一点的。
https://stackoverflow.com/a/77081486/15315728

我是这样解决的：

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交互（参考当前）设置值并单击它（点击这里是绝对必要的，以正确触发MUI TextField的输入标签，以正确的行为）.对不起，真的忙碌一天忙，我不能张贴一个很好的可复制的片段现在。