React TypeScript MUI Autocomplete默认值设置失败求助

错误原因分析 #

你遇到的类型错误是因为默认情况下MUI的Autocomplete是单选模式，它期望defaultValue是单个Product类型，但你的表单字段selectedProducts定义为Array<Product>（数组类型），类型不匹配导致报错；同时单选模式下无法正确处理数组默认值，导致默认值失效。

具体修复步骤 #

1. 开启Autocomplete的多选模式 #

给Autocomplete组件添加multiple属性，让它支持多选，此时组件的值类型会变为Array<Product>，与你的表单字段类型匹配。

2. 添加isOptionEqualToValue属性（关键） #

MUI的Autocomplete需要明确判断默认值是否存在于选项列表中，添加该属性可以确保默认值被正确识别并显示。

3. 修正相关逻辑（规范优化） #

确保onChange的参数类型与多选模式匹配，移除不必要的返回值。

修改后的完整代码 #

import { useState } from "react";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
import { Autocomplete } from "@mui/material";
import { useForm, SubmitHandler, Controller } from "react-hook-form";

export interface Product {
  id: number;
  name: string;
}

export interface FormFields {
  selectedProducts: Array<Product>;
}

export default function Demo() {
  const [products, setProducts] = useState<Array<Product>>([
    { id: 1, name: "Mouse" },
    { id: 2, name: "Printer" },
    { id: 3, name: "Monitor" },
    { id: 4, name: "server" }
  ]);

  const initFormFieldValues = {    
    selectedProducts: [{ id: 1, name: "Mouse" }]
  };

  const methods = useForm<FormFields>({
    defaultValues: initFormFieldValues
  });

  const onSubmit = (data: FormFields) => alert(JSON.stringify(data));

  return (
    <div style={{ width: "400px", margin: "20px" }}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <Controller
          control={methods.control}
          name={"selectedProducts"}
          render={({ field: { onChange, value } }) => (
            <Autocomplete
              id="product-selection"
              multiple // 开启多选模式
              options={products}
              getOptionLabel={(product) => product.name}
              isOptionEqualToValue={(option, value) => option.id === value.id} // 匹配选项与值的逻辑
              renderInput={(params) => (
                <TextField
                  {...params}
                  variant="standard"
                  label="Select Products"
                  placeholder="Type to filter list"
                />
              )}
              onChange={(_, data) => onChange(data)} // 多选模式下data是数组，直接传入
              defaultValue={initFormFieldValues.selectedProducts}
            />
          )}
        />
        <Button variant="contained" style={{ margin: "5px" }} type="submit">
          Send
        </Button>
      </form>
    </div>
  );
}

关键修改点说明 #

• multiple：将Autocomplete切换为多选模式，值类型从Product变为Array<Product>，解决类型不匹配问题。
• isOptionEqualToValue：通过id字段判断选项与默认值是否一致，确保默认值能在组件中正确显示（否则可能出现默认值存在但不渲染的情况）。
• 简化onChange：多选模式下data直接是选中的数组，无需额外返回值，直接传给react-hook-form的onChange即可。

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