React MUI TextField与react-hook-form reset方法失效问题求助

我正在开发基于React和MUI的项目，表单用react-hook-form的useForm实现，尝试在useEffect里通过reset设置默认值：

React.useEffect(() => {
  const defaultValues = new Provider();
  defaultValues.code = '123';
  defaultValues.name = 'some name';
  reset({...defaultValues});
}, []);

TextField组件声明如下：

<TextField
  id="codeInput"
  required
  label="Code"
  variant="outlined"
  error={!!errors['code']}
  helperText={errors['code'] ? errors['code'].message : ''}
  {...register('code')}
/>
<TextField
  id="nameInput"
  required
  label="Name"
  variant="outlined"
  style={{width: '75vw'}}
  error={!!errors['name']}
  helperText={errors['name'] ? errors['name'].message : ''}
  {...register('name')}
/>

我也试过用setValue赋值：

setValue('code', '123', {shouldDirty: true, shouldTouch: true});
setValue('name', 'some name', {shouldDirty: true, shouldTouch: true});

但TextField始终无法正确显示设置的值（如图所示），求解决思路：

解决思路 #

• 先排查Provider实例的结构问题：类实例直接通过{...defaultValues}展开可能无法正确获取自身属性（比如属性定义在原型链上，或者未被正确挂载到实例）。先换成普通对象字面量测试：

  React.useEffect(() => {
    const defaultValues = { code: '123', name: 'some name' };
    reset(defaultValues);
  }, [reset]);
  

  如果这样能显示，说明是Provider实例的属性读取问题，需要确保实例上确实存在code和name这两个可枚举的自身属性。

• 检查useForm初始化的默认值冲突：如果初始化useForm时设置了defaultValues，后续的reset可能被初始值覆盖。确保初始化时要么和要设置的默认值一致，要么留空：

  const { register, reset, setValue, errors, watch } = useForm({
    defaultValues: {} // 或者直接不传，避免冲突
  });
  

• 手动绑定value属性验证：虽然register已经处理了值绑定，但可以尝试用watch手动获取表单值绑定到TextField，确认是否是值传递问题：

  <TextField
    id="codeInput"
    required
    label="Code"
    variant="outlined"
    error={!!errors.code}
    helperText={errors.code ? errors.code.message : ''}
    value={watch('code') || ''}
    {...register('code')}
  />
  

• 调整setValue的参数：调用setValue时可以暂时关闭验证，避免验证逻辑干扰值的显示：

  setValue('code', '123', { 
    shouldDirty: true, 
    shouldTouch: true,
    shouldValidate: false // 关闭验证
  });
  

• 排查组件渲染干扰：检查是否有其他高阶组件、状态管理库（如Redux）或者条件渲染逻辑，导致TextField组件没有重新渲染，无法获取新的表单值。

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