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 调用。基本上，该页面是“编辑”页面，我想显示当前选择。

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 调用应该返回其他表单值时，您也可以只使用 RHF 的 reset。

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

Answer 2

不要设置默认值，而是尝试使用您想要的默认值设置一个状态，然后设置value={thestate}，以便onChange 应该更改相同的状态。