React Hook Form v6提交表单无法捕获数据返回undefined问题

提交表单时拿到字段值为undefined，是react-hook-form v6的绑定逻辑写错了，核心问题有3个：

• 仅给就业状态单选框做了Controller绑定，职业选择的Autocomplete组件完全没有接入表单状态同步逻辑，它的变更事件只触发了自定义的onProfessionChange，没有把选中值传给react-hook-form，表单收集不到对应值
• 单选组的Controller使用错误：render方法里只解构了onChange，没有拿到表单维护的value传给RadioGroup，同时给RadioGroup单独设置了defaultValue，和Controller的默认值逻辑冲突，容易导致选中状态和表单状态不同步
• 你需要收集的服务年限字段，当前代码里没有对应的表单控件，也没有做任何表单绑定，自然无法获取值

1. 修正单选组的Controller绑定，移除RadioGroup自身的defaultValue，改用受控模式绑定表单状态
2. 给职业选择的Autocomplete单独新增Controller绑定，把选中值同步到表单
3. 新增服务年限字段的表单控件和对应绑定逻辑

核心修正后的代码示例：

return (
  <form onSubmit={handleSubmit(onSubmit)}>
    <Box display="flex" flex={1} flexDirection="column">
      <Box padding={1}>
        <FormControl>
          {/* 修正就业状态单选的Controller绑定 */}
          <Controller
            control={control}
            id="isUserEmployed"
            name="isUserEmployed"
            defaultValue="hasjob"
            render={({ onChange, value }) => (
              <RadioGroup
                value={value}
                onChange={({ target: { value } }) => {
                  onChange(value);
                }}
              >
                <FormControlLabel
                  value="hasjob"
                  control={<Radio color="primary" size="small" />}
                  label="Has Job"
                />
                <Box>
                  {/* 单独给职业选择Autocomplete加Controller绑定 */}
                  <Controller
                    control={control}
                    name="profession"
                    defaultValue={null}
                    render={({ onChange, value }) => (
                      <Autocomplete
                        disablePortal
                        fullWidth
                        options={(() => {
                          if (profession === "Teacher") return jobTeacher;
                          if (profession === "Developer") return jobDeveloper;
                          return []
                        })()}
                        getOptionLabel={(option) => option?.value?.toString() || ''}
                        renderInput={(params) => (
                          <TextField {...params} variant="standard" />
                        )}
                        value={value}
                        onChange={(_, selectedVal) => {
                          onChange(selectedVal);
                          // 原有自定义业务逻辑可在此处继续调用
                          onProfessionChange && onProfessionChange(_, selectedVal)
                        }}
                        autoHighlight
                        clearOnEscape
                      />
                    )}
                  />
                </Box>
                <FormControlLabel
                  value="noJob"
                  control={<Radio color="primary" size="small" />}
                  label="No Job"
                />
              </RadioGroup>
            )}
          />
        </FormControl>
        <Button
          size="large"
          color="primary"
          variant="contained"
          type="submit"
        >
          Enter
        </Button>
      </Box>
    </Box>
  </form>
);

react-hook-form v6绑定受控组件时必须遵守两个规则：

• 每个独立表单字段单独注册/绑定独立的Controller，不要把多个无关字段塞到同一个Controller的render逻辑里
• 受控组件必须同时绑定Controller导出的value和onChange属性，不要在组件上单独设置defaultValue和Controller的默认值冲突，默认值统一在Controller的defaultValue字段声明即可
• 服务年限字段按照上述职业选择的绑定逻辑，新增对应Controller和输入/选择组件即可正常收集值

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