使用异步数据和 react-hook-form 从受控的 MUI 自动完成中获取选择

Question

我在表单中使用受控的自动完成字段。数据来自我的 redux 商店；如果数组为空，我将其初始化为 useEffect:

  const collectionList = useSelector((state) => state.collectionList);
  const { collections } = collectionList;

  useEffect(() => {
    if (collections.length === 0) dispatch(listCollections());
  }, []);

这是自动完成输入：

const ControlledAutocomplete = ({ options, control, name, label }) => {
  return (
   <Controller
     render={({ field }) => (
       <Autocomplete
         {...field}
         options={options}
         getOptionLabel={(option) => option.name || ""}
         isOptionEqualToValue={(option, value) => option.id === value.id}
         renderInput={(params) => (
           <MyTextField {...params} label={label} />
         )}
       />
     )}
    onChange={([, obj]) => obj.id}
    name={name}
    control={control}
    defaultValue=""
  />
)}

最终形式为：

<ControlledAutocomplete
  control={control}
  name="collection"
  options={collections}
  label="Collection"
 />

我在控制台中遇到此错误：

useAutocomplete.js:219 MUI: The value provided to Autocomplete is invalid. None of the options match with {}. You can use the isOptionEqualToValue prop to customize the equality test.

...可能在数据仍然不可用时？而且我也无法 select 选项中的值...我有点迷路了，我找到的所有文档似乎都是来自另一个星系的语言！提供一点帮助将不胜感激！！！

Answer 1

所以...我让这一个像这样工作：

const ControlledAutocomplete = ({ options, control, name, label, setValue }) => {
  return (
    <Controller
      render={({ field }) => (
        <Autocomplete
          {...field}
          onChange={(ev, val) => setValue(name, val)}
          options={options  || []}
          getOptionLabel={(option) => option.name || ""}
          isOptionEqualToValue={(option, value) => {
            if(value.id) return option.id === value.id
            return true
          }}
          renderInput={(params) => (
            <MyTextField {...params} label={label} />
          )}
        />
      )}
      name={name}
      control={control}
    />
  );
}

我正在使用它的形式：

<ControlledAutocomplete
  control={control}
  name="category"
  options={categories}
  label="Category"
  setValue={setValue}
/>

在 useEffect 中初始化 'categories':

useEffect(() => {
  if (categories.length === 0) dispatch(listCategories());
}, []);

和来自 react-hook-form 的钩子：

const {
  register,
  handleSubmit,
  formState: { errors },
  control,
  reset,
  setValue,
} = useForm({
  defaultValues: defaultValues,
  resolver: yupResolver(validationSchema),
});

这并不容易；我认为没有足够的记录......它编译时没有错误或警告，但我不知道这是否是正确的方法！无论如何，我希望它能帮助...

使用异步数据和 react-hook-form 从受控的 MUI 自动完成中获取选择

Get selection from controlled MUI Autocomplete with async data and react-hook-form

reactjs

redux

material-ui

react-hook-form