reactjs-select +react google- place -autocomplete:如何使用place初始化

Question

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

但是我想用place初始化它。(因为当我编辑表单时，我必须显示那里的位置)

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

获取项是{label和value}的列表。

传递初始值的HOw

Answer 1

按照创建者的建议，这最好是在React文档之后实现。但是要实现你想做的事情，你需要反应状态。

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更新我们设置的在得到实际值的条件下所设置的defualt值。如果我们没有得到真正的价值，我们就不能拯救它。