React-final-form结合Material-UI Autocomplete组件异常问题求助

让我们一步步解决你的问题：

问题根源分析 #

1. 筛选失效：你的AutocompleteAdapter里重复传递了input和rest给Autocomplete和TextField，导致props冲突，Autocomplete无法正确获取输入值来执行筛选逻辑。
2. getOptionLabel错误：当你选择选项时，Formik的Field可能把选项的**索引（数字）**而非实际的邮箱字符串同步到了value中，而你的getOptionLabel直接返回这个数字，就触发了Material-UI的类型错误。

步骤1：重构AutocompleteAdapter #

首先要理清props的传递逻辑，避免重复覆盖，同时正确对接Formik的input对象：

const AutocompleteAdapter = ({ input, options, getOptionLabel, ...rest }) => {
  // 同步Formik的value到Autocomplete，同时处理inputValue用于筛选
  return (
    <Autocomplete
      {...rest}
      options={options}
      getOptionLabel={getOptionLabel}
      forcePopupIcon={false}
      // 绑定Formik的value和onChange
      value={input.value || ''}
      onChange={(event, newValue) => {
        input.onChange(newValue);
      }}
      // 绑定输入框的输入值，用于筛选
      inputValue={input.value || ''}
      onInputChange={(event, newInputValue) => {
        input.onChange(newInputValue);
      }}
      renderInput={(params) => (
        <TextField
          {...params}
          {...rest}
          // 确保TextField的value和Autocomplete同步
          value={input.value || ''}
          label={rest.label}
          helperText={rest.helperText}
          required={rest.required}
        />
      )}
    />
  );
};

步骤2：修正Field组件的配置 #

确保getOptionLabel能处理所有可能的输入（包括选中的选项和用户输入的文本），同时保证value始终是字符串类型：

<Field
  required
  name="coach"
  label="Coach"
  type="text"
  placeholder="Enter Coach"
  helperText="coach's email"
  validate={composeValidators(required, email)}
  className={classes.field}
  options={mockEmails}
  // 确保getOptionLabel始终返回字符串，即使传入的是初始空值或非选项文本
  getOptionLabel={(option) => {
    // 处理空值或非字符串的情况
    if (!option) return '';
    return String(option);
  }}
  component={AutocompleteAdapter}
/>

步骤3：验证mockEmails的使用 #

你的mockEmails是字符串数组，这没问题，但要确保当用户选择选项时，传递给Formik的是字符串而非索引。上面的Adapter里onChange直接把newValue（即选中的邮箱字符串）传给input.onChange，就能避免索引问题。

为什么这样能解决问题？ #

• 重构后的Adapter明确区分了Autocomplete的value（选中项）和inputValue（输入文本），并正确同步到Formik的state，让筛选逻辑能正常工作。
• 增强后的getOptionLabel会把任何输入转换成字符串，避免了“收到数字”的类型错误。
• 避免了props重复传递导致的冲突，确保每个组件只拿到它需要的正确props。

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