如何用Axios响应值填充编辑场景下的MUI Autocomplete TextField？

我制作了一个宠物注册表单，其中宠物类型字段使用了MUI Autocomplete组件。现在遇到的问题是：编辑宠物信息时，无法让该Autocomplete组件自动填充数据库中的对应信息，尝试了以下代码但未实现预期效果：

// 自动补全选项加载正常
const [tipos, setTipos] = useState<ITipo[]>([])

useEffect(() => {
  axios.get<ITipo[]>(`http://localhost:8080/api/v1/tipo`)
    .then(resposta => setTipos(resposta.data))
}, [])

// 尝试编辑时填充TextField，但这部分不生效
const [tipo, setTipo] = useState<any | null>('')

useEffect(() => {
  if (parametros.id) {
    axios.get<IAnimal>(`http://localhost:8080/api/v1/pet/${parametros.id}/`)
      .then(resposta => setTipo(resposta.data.tipo.nome))
  }
}, [parametros])

<Autocomplete
  onChange={(event, value) => setTipo(value)}
  disablePortal
  id="tiposAutoComplete"
  options={tiposAutoComplete}
  sx={{ width: 300, marginTop: 1 }}
  renderInput={(params) => 
    <TextField
      {...params}
      value={tipo}
      id="especieField"
      label="Tipos"
      variant="standard"
      required />
  }
/>

问题原因 #

核心问题是状态类型不匹配：Autocomplete的选中值需要是options数组内的完整对象，但你当前只存储了tipo.nome字符串，组件无法将这个字符串与选项数组里的对象匹配，因此无法自动选中并填充。

修复步骤 #

1. 调整状态类型
   将tipo的状态类型改为ITipo | null，存储完整的类型对象而非单独的名称：

   const [tipo, setTipo] = useState<ITipo | null>(null);
   

2. 修正编辑数据的获取逻辑
   获取宠物信息后，从已加载的tipos数组中匹配对应对象（避免前后端对象引用不一致的问题）：

   useEffect(() => {
     if (parametros.id && tipos.length > 0) {
       axios.get<IAnimal>(`http://localhost:8080/api/v1/pet/${parametros.id}/`)
         .then(resposta => {
           const matchedTipo = tipos.find(t => t.nome === resposta.data.tipo.nome);
           setTipo(matchedTipo || null);
         });
     }
   }, [parametros, tipos]);
   

3. 调整Autocomplete组件配置

   • 移除TextField上的value属性，由Autocomplete统一管理输入显示
   • 给Autocomplete绑定value属性到tipo状态
   • 添加getOptionLabel指定用对象的哪个字段作为显示文本
   • 修正options变量名，确保和已加载的tipos一致

修改后的组件代码：

<Autocomplete
  onChange={(event, value) => setTipo(value)}
  value={tipo}
  disablePortal
  id="tiposAutoComplete"
  options={tipos}
  getOptionLabel={(option) => option.nome}
  sx={{ width: 300, marginTop: 1 }}
  renderInput={(params) => 
    <TextField
      {...params}
      id="especieField"
      label="Tipos"
      variant="standard"
      required />
  }
/>

额外注意点 #

• 确保tipos数组加载完成后再执行匹配逻辑，因此将tipos加入useEffect的依赖数组
• 检查所有变量名的一致性，避免出现笔误导致的选项列表为空

内容的提问来源于stack exchange，提问作者Vagner da Silva Rosnoski