如何为Material UI Autocomplete中的TextField设置当前位置默认值

我明白你遇到的问题了——直接在内部TextField设置defaultValue确实不会生效，因为Autocomplete组件会接管输入框的状态管理，TextField只是它用来渲染输入的载体而已。下面是具体的解决步骤和修改后的代码：

核心问题分析 #

Autocomplete的输入值、默认值都是由自身组件控制的，不是内部的TextField。另外你需要注意：默认值的格式必须和options数组里的选项格式一致（你的getOptionLabel已经处理了字符串和带description的对象两种情况，这点很好）。

解决方案步骤 #

1. 新增状态管理Autocomplete的选中值（如果用受控模式，推荐这种方式，比defaultValue更灵活）
2. 获取到当前地址后，把地址转换成符合选项格式的值，更新Autocomplete的状态
3. 在Autocomplete组件上设置value（受控）或defaultValue，而不是TextField上

修改后的代码示例 #

首先添加状态：

import { useState, useEffect } from 'react';

// 新增状态管理Autocomplete的值
const [autocompleteValue, setAutocompleteValue] = useState(null);

然后在地理定位获取地址的部分，同步更新Autocomplete的状态：

useEffect(() => {
  navigator.geolocation.getCurrentPosition(function(position) {
    console.log("position",position);
    console.log("Latitude is :", position.coords.latitude);
    console.log("Longitude is :", position.coords.longitude);
    // 通过经纬度获取地址
    Geocode.fromLatLng(position.coords.latitude, position.coords.longitude).then(
        response => {
            const currentAddress = response.results[0].formatted_address;
            setAddress(currentAddress);
            // 根据你的options格式设置值：如果允许字符串选项，直接传地址字符串
            // 如果options都是带description的对象，就转换成对应结构
            setAutocompleteValue(currentAddress);
            // 如果你需要把当前地址加入选项列表，可以这么做：
            // setOptions(prev => [currentAddress, ...prev]);
        },
        error => {
            console.error(error);
        }
    );
  });
}, []);

最后修改Autocomplete组件：

<Autocomplete
    id="google-map-demo"
    getOptionLabel={(option) => typeof option === "string" ? option : option.description }
    filterOptions={(x) => x}
    options={options}
    // 受控模式用value+onChange，非受控用defaultValue={autocompleteValue}
    value={autocompleteValue}
    onChange={(e, v) => {
        setAutocompleteValue(v); // 受控模式必须更新状态
        // 处理值：如果是字符串就直接用，是对象就取description
        user.setFulladdress(typeof v === "string" ? v : v.description);
        if (v.place_id) {
            getPlace(v.place_id);
        }
    }}
    renderInput={(params) => (
        <TextField
            {...params}
            placeholder="Address"
            InputProps={{
                ...params.InputProps,
                classes: { input: classes.resize, },
                disableUnderline: true,
            }}
            variant="standard"
            fullWidth
            // 这里不需要再设置defaultValue或onChange，Autocomplete已经接管
        />
)}

额外注意点 #

如果你的options数组里全是带description和place_id的对象，那你需要把获取到的地址转换成对应结构：

const currentAddressOption = {
  description: currentAddress,
  place_id: response.results[0].place_id // 从Geocode结果里取实际的place_id
};
setAutocompleteValue(currentAddressOption);

这样Autocomplete就能正确识别这个选项，完美显示当前地址作为默认值啦。

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