MUI Autocomplete getOptionSelected匹配失败 多步表单回退字段空白如何解决

• 你使用的Autocomplete组件options数组元素为对象类型，但绑定的value是数字类型的ID，组件匹配选项时会出现类型不匹配问题
• getOptionLabel未兼容非对象类型的入参，当传入的值为数字ID时，尝试读取option.name会返回undefined，导致输入框为空
• 多步骤表单回退时，表单状态的回显时机早于genderTypes选项数组的初始化时机，会临时触发无匹配项的警告

无需存储完整选项对象，仅需修改3处代码即可兼容只存ID的逻辑：

<Controller
  name="genderId"
  control={control}
  render={({ field: { value, onChange } }) => (
    <Autocomplete
      getOptionSelected={(option, value) => option.id === value}
      // 第一处：渲染时从选项中匹配到对应对象传给组件，避免类型不匹配
      value={genderTypes.find(item => item.id === value) ?? null}
      getOptionLabel={(option) => option.name}
      options={genderTypes}
      // 第二处：兼容空值场景，避免清空选择时读取id报错
      onChange={(e, v) => setValue('genderId', v?.id ?? null)}
      // 第三处：MUI v5版本用isOptionEqualToValue替代已废弃的getOptionSelected，v4版本可忽略该行
      isOptionEqualToValue={(option, value) => option.id === value.id}
      renderInput={(params) => (
        <TextField
          fullWidth
          label="Gender"
          variant="outlined"
          {...params}
        />
      )}
    />
  )}
/>

异步选项优化 #

如果你的genderTypes是异步接口获取的，可补充加载状态避免回显时临时触发警告：

• 给Autocomplete添加loading={!genderTypes.length}属性
• 给TextField添加加载状态占位符，避免用户感知异常

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