React Hook Form+Material UI设置默认值问题：TextField标签失效、Select无值

1. 文本输入框（TextField）标签未激活/被覆盖问题 #

原因分析 #

• 直接用setValue循环设置默认值存在渲染时机偏差：组件初始渲染时表单值为空，TextField的浮动标签未触发上浮；后续setValue更新值后，组件未同步状态导致标签仍覆盖内容。
• 空值强制 fallback 为'0'可能干扰标签判断逻辑，若业务允许空值，无需强制赋值。

解决方案 #

方案一：通过useForm的defaultValues初始化默认值（推荐）

将默认值计算逻辑移到useForm初始化阶段，确保组件渲染时就拿到正确初始值，从根源避免标签问题：

import { useForm } from "react-hook-form";

// 解析默认值对象
const parseDefaultValues = (val) => {
  const fields = {
    issuer_name: 'affiliatename',
    ct_name: 'technicaldata.Names',
    ct_surname_pat: 'technicaldata.PaternalLastname',
    ct_surname_mat: 'technicaldata.MaternalLastname',
    ct_casada_lastname: 'technicaldata.CasadaLastName',
    ct_position: 'technicaldata.Position',
    ct_telephone: 'technicaldata.Contact.Telephone',
    ct_mail: 'technicaldata.Contact.Mail',
    co_name: 'operationaldata.Names',
    co_surname_pat: 'operatingdata.PaternalLastName',
    co_surname_mat: 'operatingdata.MotherLastName',
    co_married_surname: 'operatingdata.MarriedLastName',
    co_position: 'operationaldata.Position',
    co_telephone: 'operationaldata.Contact.Telephone',
    co_mail: 'operationaldata.Contact.Mail',
  };
  
  const defaultValues = {};
  for (const field in fields) {
    let value = val;
    for (const part of fields[field].split('.')) {
      value = value?.[part]; // 可选链避免层级报错
    }
    defaultValues[field] = value ?? ''; // 空值 fallback 为空字符串
  }
  return defaultValues;
};

// 组件内初始化表单
const { register, handleSubmit, formState: { errors }, control } = useForm({
  defaultValues: parseDefaultValues(result.result[0])
});

此时TextField初始渲染就有值，浮动标签会自动上浮，无需后续setValue操作。

方案二：用Controller包裹TextField（复杂受控场景适用）

若需动态设置值，用react-hook-form的Controller托管组件状态，确保值变化时组件同步更新：

import { Controller } from "react-hook-form";

<Controller
  name="issuer_name"
  control={control}
  render={({ field }) => (
    <TextField
      error={!!errors.issuer_name}
      label="Issuer"
      placeholder="Sender name"
      size="small"
      fullWidth
      {...field}
    />
  )}
/>

2. 下拉选择框（Select）无法设置默认值问题 #

原因分析 #

• Select同时设置defaultValue=""和{...register('ct_position')}，两者冲突：register会接管组件value状态，手动设置的defaultValue被覆盖。
• 若technicaldata.Position的值不在positions数组中，Select无法匹配对应MenuItem，导致默认值不显示。

解决方案 #

步骤1：移除defaultValue属性

删除Select上的defaultValue=""，让register完全接管值状态：

<Select
  labelId="ct_position_label"
  label="Position"
  {...register('ct_position')}
>
  {positions.map((name) => (
    <MenuItem key={name} value={name}>
      {name}
    </MenuItem>
  ))}
</Select>

步骤2：确保默认值与MenuItem的value匹配

检查technicaldata.Position的值是否存在于positions数组中，若不存在，添加兜底逻辑：

// 解析默认值时处理
defaultValues.ct_position = value ?? positions[0] ?? '';

步骤3：用Controller增强可控性（可选）

对于Select这类组件，用Controller包裹能更稳定同步状态：

<Controller
  name="ct_position"
  control={control}
  render={({ field }) => (
    <FormControl fullWidth size="small" error={!!errors.ct_position}>
      <InputLabel id="ct_position_label">Position</InputLabel>
      <Select
        labelId="ct_position_label"
        label="Position"
        {...field}
      >
        {positions.map((name) => (
          <MenuItem key={name} value={name}>
            {name}
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  )}
/>

额外注意事项 #

• 若必须用setValue动态赋值，需放在useEffect中确保组件挂载后执行：

import { useEffect } from 'react';

useEffect(() => {
  for (const field in fields) {
    const value = getValue(val, fields[field]);
    setValue(field, value ?? '');
  }
}, [val, setValue]);

• 优化getValue函数的容错性：

function getValue(object, field) {
  const parts = field.split('.');
  let value = object;
  for (const part of parts) {
    value = value?.[part];
    if (value === undefined) break;
  }
  return value;
}

内容的提问来源于stack exchange，提问作者Adrian flores