反应形式与材料UI选择输入不起作用的挂钩 textfield下方的选择应加载： 它如何实际加载： 我的选择组件使用材料UI + React form Hook创建，不会加载默认值。 （组件应启动W ...

Question

如何实际加载：

我使用材料UI + React Form Hook创建的选择组件不会加载默认值。 （该组件应以选择的值开始，该值在代码的下一部分中提供了一次）

  const clientData = await api.client.getClient(id);
  reset({ ...clientData });

发生在一个应运行一次，加载页面并从URL中获得ID时运行一次的使用效应。选择代码：

export const ClientSourceSelect = ({
      control,
      clientSources,
      getValues,
      errors,
    }: ClientSourceSelectProps) => (
      <FormControl fullWidth>
        <Controller
          control={control}
          name="clientSourceId"
          render={({ field: { onChange, value } }) => (
            <>
              <TextField label={value}></TextField>
              <Select onChange={onChange} value={value}>
                {clientSources.map((clientSource) => (
                  <MenuItem key={clientSource.id} value={clientSource.id}>
                    {clientSource.name}
                  </MenuItem>
                ))}
              </Select>
            </>
          )}
        />
      </FormControl>
    );

I在选择上创建了TextField，以测试该值是否真的加载了，并且该值在SELECT（对应于Clienterource.ID的UUID）上确实显示了该值，因此值本身存在，但是SELECT启动了空白。使用检查器，LI元素具有与其相应ID的正确数据值属性。

在文档上，您可以在调用USEFORM（）挂钩时提供默认值。

const { control } = useForm({
  defaultValues: {
    clientSourceId: <your default id>
  }
});

您可以在此沙箱中找到您的工作代码：

Https：//codesandbox.io/s/young-sun-7ee953

Answer 1

将默认值设置为选择组件对我有用，但在useform中不适用

<Select
  defaultValue={defaultValueFromAPI}
  value={value}
  onChange={onChange}
>
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
</Select>