Material UI Autocomplete组件无法通过React Hook Form设置API返回默认值问题

我来帮你梳理下问题所在，以及对应的解决办法：

问题1：Autocomplete无法正确接收setValue设置的值 #

你当前的Controller组件里只用到了field.onChange，但没有把field.value传递给Autocomplete，这就导致Autocomplete不知道当前表单的选中值是什么，自然无法正确显示你设置的默认值。

修改你的Controller组件，把field的value传给Autocomplete：

<Controller 
  name={name} 
  control={control}
  // 初始化时可以设为null，后续用setValue更新
  defaultValue={null} 
  render={({field: {onChange, value}}) => (
    <Autocomplete 
      value={value} // 关键：把表单的当前值绑定给Autocomplete
      onChange={(e, data) => onChange(data)} // 直接传递选中的完整对象给表单
      options={options || []}
      getOptionLabel={(option) => option.name}
      isOptionEqualToValue={(option, value) => option.id === value?.id} // 处理value为null的边界情况
      renderInput={(params) => <TextField {...params} placeholder="test" label="test"/>}
    />
  )} 
/>

这里有两个核心调整：

• 绑定field.value到Autocomplete的value属性，让组件和表单状态保持同步
• onChange直接传递选中的完整对象，和你用setValue设置的对象格式完全匹配，避免数据格式不一致

问题2：使用defaultValue出现受控/非受控组件错误 #

这个警告的原因是：defaultValue只在组件初始化时生效，如果你后续通过setValue或者状态更新修改值，组件就从「非受控」变成了「受控」，React会因为状态控制逻辑不一致抛出警告。

结合你的编辑页面场景，推荐这样调整：

// 假设prerequisites.gender是API返回的性别对象（比如{id: 'male', name: 'Male'}）
useEffect(() => {
  if (prerequisites?.gender) {
    setValue("gender", prerequisites.gender);
  }
}, [prerequisites, setValue]); // 记得把setValue加入依赖数组

全程通过setValue来控制表单值，不要混用defaultValue和后续的动态更新，就能避免这个警告。

额外注意事项 #

• 确保isOptionEqualToValue能正确匹配选项和值，尤其是值可能为null的时候，用可选链value?.id避免报错
• 如果你的options也是从API加载的，要保证在调用setValue之前，options已经加载完成，不然Autocomplete找不到对应选项，也无法显示选中状态

这样调整后，你的Autocomplete应该就能正确显示从API获取的用户当前选中项了。

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