使用React-Hook-Form useFieldArray时MUI Autocomplete警告问题求助

算力阿峰

2026-7-14

解决MUI Autocomplete在React-Hook-Form useFieldArray中的匹配警告

问题场景

在使用React-Hook-Form的useFieldArray功能的表单中引入自定义MUI Autocomplete组件时，出现以下警告：

The value provided to Autocomplete is invalid.
None of the options match with {"id":"1","name":"Electrical High Voltage"}.
You can use the isOptionEqualToValue prop to customize the equality test.

组件能正常加载数据，但警告持续出现；该组件在其他表单中可正常工作，仅在useFieldArray中触发警告。

MongoDB存储的数据结构中，code.id为字符串类型：

{
  "eiclDetail": {
    "checklistDetail": [
      {
        "code": {
          "id": "1",
          "name": "Electrical High Voltage"
        }
      }
    ]
  }
}

核心原因

自定义Autocomplete组件的选项中，id是数字类型（如{id: 1, name: "Electrical High Voltage"}），但从MongoDB读取的code.id是字符串类型（如"1"）。而组件中isOptionEqualToValue使用严格相等===比较，类型不匹配导致无法匹配到对应选项，触发警告。

修复方案

方案1：统一选项的id类型为字符串

修改父组件中autocompleteOptions的id值为字符串，与MongoDB存储的类型保持一致：

useEffect(() => {
  setAutocompleteOptions([
    { id: "1", name: "Electrical High Voltage" },
    { id: "2", name: "Electrical Low Voltage" },
    { id: "3", name: "Radiation" },
    { id: "4", name: "Mechanical" },
  ]);
}, []);

方案2：修改`isOptionEqualToValue`的比较逻辑

如果无法修改选项的id类型，可在自定义组件中调整比较逻辑，将双方转成相同类型后再比较：

isOptionEqualToValue={(option, value) => {
  if (value === undefined || value === "") return true;
  // 转成字符串后比较
  return String(option.id) === String(value.id);
}}