Material UI 的自動完成不會使用 react-hook-form 在 React 中顯示所選值

Question

我在使用 react-hook-form 以及包含name和id的對象的選項使 Material UI 的自動完成顯示所選項目時遇到問題。 當我 select 一個項目時，盒子是空的。

我有一個包含material的自定義MaterialBar的FieldArray ：

<Controller
  control={control}
  name={`materialBars.${index}.materialId`}
  render={(
    { field: { value, onChange } }
  ) => (
    <Autocomplete
      options={materials.map(material => ({id: material.id, name: material.name})} // materials are fetched from the API
      getOptionLabel={(option) => option.name}
      value={materialItems.find((item) => `${item.id}` === value) || null}
      onChange={(_, val) => onChange(val?.id)}
      renderInput={(params) => <TextField {...params} label="Material" />}
    />
  )}
/>

codesandbox中有一個工作示例。

當我 select 列表中的一種材料時，該框被清除，並且顯示占位符文本而不是所選材料（當焦點從框中移開時）。 該項目是在引擎蓋下選擇的，因為在我的應用程序中，當我按下提交時，新選擇的材料被保存到后端。

我不知道問題出在 react-hook-form 部分、材質 UI 還是我試圖連接兩者。 我想如果選項只是一個帶有材料名稱的字符串數組（當表單模式只有 materialId 時）會更容易，但最好跟蹤 id，以便在聯系 API 時使用。

Answer 1

您應該在 FormValue 和 ListData 之間的materialId屬性上設置相同的類型。

例如，如果我使用數字類型，它應該是

https://codesandbox.io/s/autocomplete-forked-mpivv1?file=/src/MaterialBar.tsx

// App.tsx
const { control, reset } = useForm<FormValues>({
    defaultValues: {
      materialBars: [
        // use number instead of string
        { ..., materialId: 1 },
        { ..., materialId: 6 }
      ]
    }
  });

// util.ts
export const materials = [
  {
    id: 1, // keep it as number type
    ...
  },
  ...
];

// util.ts
export type FormValues = {
  materialBars: {
    // change it from string type to number
    materialId: number;
    ...
  }[];
};

// MaterialBar.tsx
<Controller
  ...
  ) => (
    <Autocomplete
      ...
      /* 
         Remove curly  brackets
           - change`${item.id}` to item.id
      */
      value={materialItems.find((item) => item.id === value) || null}
      
    />
  )}
/>