Material UI Autocomplete结合react-hook-form选中值不显示问题求助

问题原因 #

你遇到的核心问题是Material UI Autocomplete无法正确识别选中项，根源有两点：

1. Autocomplete默认通过浅比较判断选中状态，但你在React Hook Form中存储的是materialId（字符串/数字），而Autocomplete的value需要是完整的选项对象，类型不匹配导致识别失败。
2. 未指定getOptionSelected属性，Autocomplete无法自定义选中项的判断逻辑；同时你获取value的数组存在逻辑偏差，还可能有类型不匹配问题。

解决方案 #

给Autocomplete添加getOptionSelected属性指定选中判断逻辑，同时修正value的获取逻辑，确保从正确的数组中匹配完整的选项对象：

<Controller
  control={control}
  name={`materialBars.${index}.materialId`}
  render={({ field: { value, onChange } }) => (
    <Autocomplete
      options={materials.map(material => ({ id: material.id, name: material.name }))}
      getOptionLabel={(option) => option.name}
      // 从API返回的materials数组中匹配对应id的完整对象
      value={materials.find(item => item.id === value) || null}
      // 告诉Autocomplete通过id判断选项是否选中
      getOptionSelected={(option, selected) => option.id === selected.id}
      onChange={(_, val) => onChange(val?.id)}
      renderInput={(params) => <TextField {...params} label="Material" />}
    />
  )}
/>

关键说明 #

• getOptionSelected：必须显式指定，因为你存储的是id而非整个对象，该属性让Autocomplete通过id字段匹配选中项，替代默认的浅比较逻辑。
• value的获取：确保从生成options的原数组（materials）中查找匹配id的对象，这样Autocomplete才能正确关联选项并显示对应的name文本。
• 类型一致性：保证item.id和value的类型统一（比如都是数字或都是字符串），避免因类型不匹配导致查找失败。如果后端返回的id是数字、form中存储的是字符串，可改用String(item.id) === value统一类型后比较。

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