Material-UI Autocomplete组件与react-hook-form集成时的选项过滤问题解析

在使用Material-UI的Autocomplete组件时，开发者经常会遇到与react-hook-form集成时的选项过滤问题。本文将深入分析这一常见问题的成因，并提供完整的解决方案。

问题现象

当Autocomplete组件配置了multiple多选属性和filterSelectedOptions选项过滤属性，并与react-hook-form结合使用时，会出现两个典型问题：

1. 已选中的选项仍然会出现在下拉列表中，没有被正确过滤
2. 同一个选项可以被重复选择多次

问题根源

这种现象的根本原因在于Autocomplete组件无法正确比较对象类型的选项值。默认情况下，组件使用严格相等(===)来比较选项，但对于复杂对象，即使内容相同，引用不同也会被视为不同选项。

解决方案

Material-UI提供了isOptionEqualToValue属性来解决这个问题。这个属性允许开发者自定义选项比较逻辑：

<Autocomplete
  multiple
  filterSelectedOptions
  isOptionEqualToValue={(option, value) => option.id === value.id}
  // 其他属性...
/>

实现要点

1. 对象标识比较：对于对象类型的选项，必须明确指定比较哪个属性（通常是id）

2. 性能考虑：比较逻辑应尽可能简单高效，避免复杂计算

3. 类型安全：在TypeScript项目中，应正确定义选项和值的类型

完整示例

import { Autocomplete, TextField } from '@mui/material';
import { useForm, Controller } from 'react-hook-form';

function AutocompleteForm() {
  const { control } = useForm();
  const options = [
    { id: 1, label: '选项1' },
    { id: 2, label: '选项2' },
    // 更多选项...
  ];

  return (
    <Controller
      name="autocompleteField"
      control={control}
      render={({ field }) => (
        <Autocomplete
          multiple
          filterSelectedOptions
          options={options}
          getOptionLabel={(option) => option.label}
          isOptionEqualToValue={(option, value) => option.id === value.id}
          onChange={(_, data) => field.onChange(data)}
          value={field.value || []}
          renderInput={(params) => (
            <TextField {...params} label="多选字段" />
          )}
        />
      )}
    />
  );
}

最佳实践

1. 始终为对象类型的选项定义isOptionEqualToValue
2. 在使用react-hook-form时，通过Controller组件包装Autocomplete
3. 为多选场景提供清晰的用户反馈，如标签显示已选项数量
4. 考虑为大量选项实现虚拟滚动优化性能

通过正确配置Autocomplete组件，开发者可以构建出既美观又功能完善的多选表单控件，完美集成到react-hook-form管理的表单体系中。