Material UI Autocomplete配合react-hook-form无法同时展示值与编辑的问题

问题根因 #

• MUI Autocomplete 存在两个独立的受控状态：value 对应当前选中的完整选项对象，必须和 options 数组里的项结构完全匹配；inputValue 对应输入框内的实时输入文本，需要配套 onInputChange 同步更新才能正常编辑
• 你当前把两个状态都绑定到了 react-hook-form 存储的 cnae 字符串，同时没有配置 onInputChange 同步输入内容，导致输入时状态无法更新，所以输入无响应
• 你给 value 传的是字符串，但 options 里的项是带 descricao、id 等字段的对象，结构不匹配导致 Autocomplete 无法识别默认值，自然无法展示

修复步骤 #

1. 调整 react-hook-form 存储逻辑，不再单独存 descricao 字符串，改为存储完整的选中选项对象，保证和 options 项结构匹配
2. 移除手动绑定的 inputValue 属性，Autocomplete 内部会自动处理输入文本和选中值的展示
3. 调整 onChange 回调，直接把选中的完整对象存入 react-hook-form

修正后代码 #

组件调用部分 #

<ACCnae
  name="cnae"
  label="Ramo"
  fullWidth
  errors={errors}
  options={context.cnae}
  setValue={setValue}
  // 这里getValues拿到的是完整的option对象
  cnae={getValues("cnae")}
  required
/>

Autocomplete 组件部分 #

<Autocomplete
  id={name}
  options={options}
  getOptionLabel={(option) => (option.descricao ? option.descricao : "")}
  filterOptions={filterOptions}
  onChange={(e, selectedOption) => {
    // 直接存完整的选中对象
    setValue(name, selectedOption)
  }}
  // value传完整的option对象，和options项结构匹配就能正常展示默认值
  value={cnae ?? null}
  renderOption={(props, options) => (
    <Box component="li" {...props}>
      {options.id +
        "/" +
        options.grupo.divisao.id +
        ", " +
        options.descricao}
    </Box>
  )}
  loading={loading}
  renderInput={(params) => (
    <TextField
      {...params}
      {...other}
      label={label}
      error={Boolean(errors[name])}
      helperText={errors[name] ? errors[name].message : ""}
    />
  )}
/>

特殊场景适配 #

如果你确实只需要在 react-hook-form 里存储 descricao 字符串，不想存完整对象，可以用 isOptionEqualToValue 属性来做匹配：

<Autocomplete
  // 其他属性保持不变
  isOptionEqualToValue={(option, value) => option.descricao === value}
  value={cnae ?? ""}
  onChange={(e, selectedOption) => {
    setValue(name, selectedOption?.descricao ?? "")
  }}
/>

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