为Google Places Autocomplete设置默认值遇输入无法编辑问题

问题根源 #

你在ref回调中直接调用setAddressText会导致每次组件渲染时都强制重置输入框值——比如用户手动修改输入内容时，组件重新渲染，ref回调再次执行，把输入框拉回city状态值，因此无法编辑。而在ref外部调用无效，通常是因为组件还未完成挂载，ref还未指向实例。

解决方案 #

使用useRef保存组件引用，配合useEffect在组件挂载后（或初始城市值就绪时）设置默认值，避免重复覆盖用户输入：

import { useRef, useEffect } from 'react';

// 函数组件内部
const cityAutoComplete = useRef(null);

// 仅在初始城市值就绪且组件挂载后设置默认值
useEffect(() => {
  if (city && cityAutoComplete.current) {
    cityAutoComplete.current.setAddressText(city);
  }
}, [city]); // 依赖city，确保城市值更新时同步（仅初始加载或主动修改city时触发）

// 渲染组件
<GooglePlacesAutocomplete
  ref={cityAutoComplete}
  styles={{
    textInputContainer: { height: scale(50) },
    container: {
      width: "100%",
      backgroundColor: "transparent",
    },
    textInput: {
      borderBottomWidth: 1,
      marginTop: scale(10),
      textAlign: "center",
      fontSize: 18,
      fontFamily: "Heebo-Regular",
      backgroundColor: "transparent",
      paddingBottom: 4,
      width: scale(200),
    },
  }}
  placeholder={strings("City")}
  value={city}
  onPress={(data, details = null) => {
    setCity(data.terms[0].value);
    setNeedReload(true);
  }}
  query={{
    types: "(cities)",
    key: globals.GOOGLE_API_KEY,
    language: "he",
  }}
/>

关键说明 #

1. useRef保存引用：替代普通变量，确保组件引用在多次渲染中保持稳定，不会被重置。
2. useEffect控制执行时机：仅在组件挂载完成、且city有有效值时执行setAddressText，避免重复覆盖用户输入。
3. 依赖项控制触发条件：依赖数组[city]保证仅当城市初始值加载完成，或主动通过setCity修改时才同步输入框值，用户手动编辑时不会被干扰。

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