React Hook Form 提交表单后返回undefined 问题排查求助

问题根因排查 #

你当前提交数据为undefined的核心原因是 Controller 组件的使用不符合React Hook Form的规范，具体问题如下：

• Controller 是受控字段的核心包装组件，必须接收name、control两个必填参数，你当前把这两个参数错误传递给了内部的TextField，没有绑定到Controller上，导致表单无法跟踪对应字段的输入。
• Controller的render回调会返回包含onChange、value、onBlur等控制方法的field对象，你没有把该对象的属性绑定到TextField上，输入内容无法同步到表单状态中。
• defaultValue应当传递给Controller而非内部输入组件，也可在初始化useForm时全局设置defaultValues，优先级更高。

修正后的代码 #

const FormInput = ({ name, label, required, defaultValue, InputProps }) => {
  const { control } = useFormContext();
  return (
    <Grid item xs={12} sm={6}>
      <Controller
        // 核心参数必须传给Controller
        name={name}
        control={control}
        defaultValue={defaultValue}
        // 接收field参数并绑定到TextField
        render={({ field }) => (
          <TextField
            {...field}
            fullWidth
            label={label}
            required={required}
            InputProps={InputProps}
          />
        )}
      />
    </Grid>
  );
};

额外检查项 #

• 确认你初始化useForm的代码没有错误，示例正确初始化写法：

  const methods = useForm({
    defaultValues: {
      firstName: '',
      lastName: '',
      address: '',
      email: '',
      city: '',
      zip: ''
    }
  });
  

• 确认你的表单标签已正确闭合，你粘贴的代码中form、Grid标签都存在未闭合的问题，实际运行时要保证标签结构完整。

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