使用 Material UI Select 輸入的 React 表單掛鈎不起作用

Question

文本字段下方的 de Select 應如何加載：

它實際上是如何加載的：

使用 Material UI + React 表單掛鈎創建的我的 Select 組件未加載默認值。 （該組件應以選定的值開始，該值在代碼的以下部分中提供一次）

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

它發生在應該運行一次的 useEffect 中，當頁面加載並且從 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>
    );

我在 Select 上創建了 TextField 以測試該值是否真的被加載，並且該值確實顯示在 Select 上（對應於 clientSource.id 的 uuid），因此該值本身存在但 Select 開始為空白。 使用檢查器，li 元素具有正確的數據值屬性及其相應的 id。

Answer 1

根據文檔，您可以在調用 useForm() 掛鈎時提供默認值。

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

您的工作代碼可以在此沙箱中找到： https ://codesandbox.io/s/young-sun-7ee953

Answer 2

你能告訴我你的 onChange 函數嗎