Next.js/Shadcn中React Hook Form预设表单值更新失效求助

以下是针对表单值未随currentFormValue更新问题的具体解决建议：

1. 确保currentFormValue的引用正确更新 #

React状态更新依赖引用变化，如果直接修改原对象属性（而非创建新对象），useEffect不会触发。更新currentFormValue时必须生成新的引用：

// 错误示例：直接修改原对象，无法触发状态更新
currentFormValue.email = 'new@example.com';
setCurrentFormValue(currentFormValue);

// 正确示例：创建新对象，触发状态更新
setCurrentFormValue(prev => ({ ...prev, ...presetValues }));
// 或直接传入全新的预设对象
setCurrentFormValue(presetValues);

2. 验证reset参数的结构匹配度 #

form.reset()要求传入的对象结构与formSchema完全一致，包括嵌套字段和可选字段的层级。如果结构不匹配，表单不会正确更新：

• 检查presetValues的键是否与formSchema定义的字段一一对应
• 嵌套字段需保证层级完全匹配（比如schema里有user.name，预设值也要有user: { name: 'xxx' }）

3. 修正useForm的默认值初始化 #

如果currentFormValue初始为undefined或null，会导致defaultValues异常，影响后续reset操作。建议给defaultValues设置与schema匹配的初始空值：

const form = useForm({
  resolver: zodResolver(formSchema),
  defaultValues: currentFormValue || {
    name: '',
    email: '',
    // 其他字段按schema定义设置对应默认空值
  }
});

4. 调试useEffect的触发情况 #

在useEffect中添加日志，确认currentFormValue变化时是否触发了回调：

useEffect(() => {
  console.log('currentFormValue updated:', currentFormValue);
  if (currentFormValue) {
    updateFormValuesWithPreset(currentFormValue);
  }
}, [currentFormValue]);

如果日志未打印，说明currentFormValue的状态更新逻辑存在问题，需检查父组件的状态传递或更新方式。

5. 确认Shadcn组件的表单绑定正确 #

Shadcn组件必须通过React Hook Form的register或Controller正确绑定，否则表单值更新后组件不会同步显示：

• 普通组件用register：

import { Input } from '@/components/ui/input';

<Input {...register('name')} placeholder="姓名" />

• 自定义复杂组件用Controller：

import { Controller } from 'react-hook-form';
import { Select } from '@/components/ui/select';

<Controller
  name="role"
  control={form.control}
  render={({ field }) => (
    <Select {...field}>
      <option value="admin">管理员</option>
      <option value="user">普通用户</option>
    </Select>
  )}
/>

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