Material UI 无法设置自动完成的默认值

Question

我正在使用 React Hook Form 在从 API 加载数据时设置 gender 自动完成的值。但是自动完成似乎没有设置数据。我的主要组件如下所示：

// this function is used to set the default form values. for now, its just gender value
const setFormValues = () => {
       setValue("gender", {id: 'male', name: 'Male'})
    };

而在 useEffect 中，每当数据加载完成时，我就是运行上面的函数。

// prerequisites consists of many objects. gender is one of them
useEffect(() => {
        setFormValues();
    }, [prerequisites]);

组件如下所示：

<Controller
        name={name}
        control={control}
        render={({field: {onChange}}) => (
          <Autocomplete
            onChange={(e, data) => onChange(data?.[onChangeAttribute])}
            options={options || []}
            getOptionLabel={(option) => option.name}
            isOptionEqualToValue={(option, value) => option.id === value.id}
            renderInput={(params) => <TextField {...params} placeholder="test" label="test"/>}
          />
        )}
      />

然后我继续查看指向我 this 的文档。基本上，我可以传递一个默认值。然后我继续创建状态并从 setFormValues() 函数设置该状态。状态设置正确。但是当我将它传递给 defaultValue 时，该值未被设置，而是显示错误不受控制的组件被用作受控组件并将其用作受控组件。

我想做什么：

我的想法是设置来自对 useEffect 的 API 调用的默认值。基本上，该页面是 'edit' 页面，我想显示当前选择。

Answer 1

您未在 <Autocomplete /> 上设置 value 属性。

<Controller
  name={name}
  control={control}
  render={({field: {onChange, value}}) => (
    <Autocomplete
      onChange={(e, data) => onChange(data?.[onChangeAttribute])}
      options={options || []}
      value={value}
      getOptionLabel={(option) => option.name}
      isOptionEqualToValue={(option, value) => option.id === value.id}
      renderInput={(params) => <TextField {...params} placeholder="test" label="test"/>
      }
    />      
  )}
/>

当您的 API 调用应该 return 其他形式的值时，您也可以只使用 RHF 的 reset。

useEffect(() => {
  reset(prerequisites);
}, [prerequisites]);

Answer 2

不要设置默认值，而是尝试让状态具有您想要的默认值，然后设置 value={thestate}，这样 onChange 应该更改相同的状态。

Material UI 无法设置自动完成的默认值

Material UI unable to set default value on Autocomplete

reactjs

autocomplete

material-ui

react-hook-form