React Hook Form结合Material UI Autocomplete预填值不显示问题求助

问题原因 #

Material UI 的 Autocomplete 组件处理对象类型选项时，默认通过对象引用判断选中值与选项是否匹配。即便 React Hook Form 的 values 已正确更新，若组件无法识别值与选项的匹配关系，就不会显示预填充的选中项。

解决方案 #

在 Autocomplete 组件中添加 isOptionEqualToValue 属性，显式定义值与选项的匹配逻辑（比如通过唯一标识 id 比较），确保组件能正确识别选中值。

修改后的完整代码 #

import { useForm, Controller, FormProvider } from "react-hook-form";
import { Autocomplete, Checkbox, TextField } from "@mui/material";
import CheckBoxIcon from "@mui/icons-material/CheckBox";
import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
import { useEffect } from "react";

const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
const checkedIcon = <CheckBoxIcon fontSize="small" />;

type IOptions = {
  id: number;
  name: string;
};

type IForm = {
  persons: IOptions[];
};

export default function Form() {
  const methods = useForm<IForm>();

  const persons = [
    { id: 1, name: "john doe" },
    { id: 2, name: "Jane Doe" },
  ];

  useEffect(() => {
    methods.reset({
      persons: [persons[0]],
    });
  }, []);

  return (
    <FormProvider {...methods}>
      <form>
        <Controller
          name="persons"
          render={({ field: { onChange, value, ...rest } }) => (
            <Autocomplete
              multiple
              options={persons}
              getOptionLabel={(option) => option.name}
              // 显式定义选项与值的匹配逻辑
              isOptionEqualToValue={(option, value) => option.id === value.id}
              renderOption={(props, option, { selected }) => (
                <li {...props} key={`person-${option.id}`}>
                  <Checkbox
                    key={`checkbox-${option.id}`}
                    icon={icon}
                    checkedIcon={checkedIcon}
                    checked={selected}
                  />
                  {option.name}
                </li>
              )}
              renderInput={(params) => (
                <TextField
                  {...params}
                  label="Persons"
                />
              )}
              onChange={(e, newValue) => onChange(newValue)}
              {...rest}
              value={value}
            />
          )}
        />
      </form>
    </FormProvider>
  );
}

关键修改说明 #

• isOptionEqualToValue={(option, value) => option.id === value.id}：替代默认的引用比较逻辑，通过对象的唯一标识 id 判断选项与选中值是否一致，确保组件能正确识别预填充值。
• 保持 reset 操作使用的对象与 persons 数组中的结构一致，避免因数据结构不匹配导致的识别失败。

修改完成后，Autocomplete 组件即可正常加载并显示预填充的选中字段。

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