react-select - reactjs-select + react-google-places-autocomplete：如何使用地点进行初始化

Question

我正在使用来自https://www.npmjs.com/package/react-google-places-autocomplete的现成组件用于 google 自动完成位置

但我想用地方初始化它。（因为当我编辑表格时，我必须在那里显示该位置）

import React from "react";
import GooglePlacesAutocomplete from "react-google-places-autocomplete";

const GooglePlacesAutocompleteComponent = () => (
  <div>
    <GooglePlacesAutocomplete
      apiKey="xxxxxxxxxxxxxxx"
    />
  </div>
);

export default Component;

以上是组件

和用途是

<GooglePlacesAutocompleteComponent />}

我知道react-google-places-autocomplete用途react-select AsyncSelect

    <AsyncSelect
      {...selectProps}
      loadOptions={fetchSuggestions}
      getOptionValue={({ value }) => value.place_id}
    />

fetchsugestions 是 {label and value} 的列表

如何传递初始值

Answer 1

这最好遵循创建者建议的 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 来更新我们在获得实际值的条件下设置的默认值。如果我们没有获得实际价值，我们就不会保存它。