react-google-places-autocomplete如何设置地点初始值实现表单回填？

你可以通过透传react-select支持的defaultValue（非受控场景）或value（受控场景）属性实现初始值回填，具体操作如下：

步骤1：改造你的封装组件，支持接收初始值参数 #

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

// 新增initialValue入参用于接收初始地点值，可按需添加onChange等回调参数
const GooglePlacesAutocompleteComponent = ({ initialValue, onChange }) => (
  <div>
    <GooglePlacesAutocomplete
      apiKey="xxxxxxxxxxxxxxx"
      // 非受控回填用defaultValue，受控场景请替换为value
      defaultValue={initialValue}
      // 可选：绑定值变化回调
      onChange={onChange}
    />
  </div>
);

export default GooglePlacesAutocompleteComponent;

步骤2：使用组件时传入符合格式要求的初始值 #

组件要求初始值结构必须和fetchSuggestions返回的选项结构一致，格式为{label: 显示文本, value: {place_id: 谷歌地点ID}}，示例如下：

// 从你表单的已保存数据中取出地点信息，组装为指定格式
const savedPlace = {
  // 显示在输入框中的地点文本
  label: "广东省广州市天河区珠江新城",
  value: {
    // 必填，和组件内部getOptionValue的取值逻辑匹配
    place_id: "ChIJV9xxxxxxxxx",
    // 其他你已保存的地点附加字段可按需补充
    description: "广东省广州市天河区珠江新城"
  }
}

// 调用组件时传入即可完成初始回填
<GooglePlacesAutocompleteComponent initialValue={savedPlace} />

注意事项 #

• 初始值的value字段必须包含place_id属性，否则会出现初始值无法正常识别、显示为空的问题
• 如果你只存储了place_id没有存储地点显示文本，可以在组件渲染前调用谷歌地点详情接口获取完整信息，组装成上述格式后再传入
• 若需要使用受控组件模式，将defaultValue替换为value属性，同时配合onChange回调更新绑定的状态即可

内容的提问来源于stack exchange，提问作者Santhosh