React JS使用React Hook Form时onSubmit获取remainhrs值为undefined如何解决

问题根因 #

• 你自行维护的remainhrsvalue本地状态没有同步到React Hook Form的表单状态库中，remainhrs表单字段从未被更新，提交时自然返回undefined
• 代码存在基础变量引用错误：你从methods中解构表单操作方法，但useForm的返回值实际存储在formvalues变量中
• handleTextChanged计算剩余时长时取值逻辑错误，没有正确获取actualhrs和输入的workhrs有效值

解决步骤 #

不需要额外维护workhrsvalue、remainhrsvalue两个冗余的本地状态，直接用React Hook Form自带的watch监听字段变化、setValue更新计算字段即可，修正后的代码如下：

// 1. 从useForm返回值中正确解构所需方法
const formvalues = useForm({
  mode: 'onSubmit',
  reValidateMode: 'onChange',
  defaultValues: {
    workhrs: 0,
    remainhrs: 0,
    actualhrs: 5
  },
  resolver: yupResolver(schema),
});
const { control, watch, reset, handleSubmit, setValue, formState, getValues } = formvalues;

// 2. 监听工作时长和实际时长的变化，自动计算剩余时长并同步到表单字段
const workhrs = watch('workhrs');
const actualhrs = watch('actualhrs');
useEffect(() => {
  const workhrsNum = parseFloat(workhrs) || 0;
  const actualhrsNum = parseFloat(actualhrs) || 0;
  setValue('remainhrs', actualhrsNum - workhrsNum);
}, [workhrs, actualhrs, setValue]);

const onSubmit = async (data) => {
  // 此时data中已经包含正确的remainhrs字段值
  console.log(data);
}

// 3. 表单部分简化逻辑，无需额外绑定onChange事件
return (
  <FormProvider {...formvalues}>
    <form
      noValidate
      onSubmit={handleSubmit(onSubmit)}
      className="flex flex-col md:overflow-hidden"
    >
      <Controller
        render={({ field }) => (
          <TextField
            {...field}
            id="actualhrs"
            autoFocus={true}
            variant="outlined"
            placeholder="actualhrs"
            // 如果实际时长不允许修改可以加readOnly
            InputProps={{ readOnly: true }}
          />
        )}
        name="actualhrs"
        control={control}
      />
      <Controller
        render={({ field }) => (
          <TextField
            {...field}
            id="workhrs"
            variant="outlined"
            placeholder="workhrs"
          />
        )}
        name="workhrs"
        control={control}
      />
      <Controller
        render={({ field }) => (
          <TextField
            {...field}
            id="remainhrs"
            variant="outlined"
            placeholder="remainhrs"
            // 剩余时长是计算值，设置为只读
            InputProps={{ readOnly: true }}
          />
        )}
        name="remainhrs"
        control={control}
      />
    </form>
  </FormProvider>
)

修改后提交表单时，onSubmit回调的data参数中就可以直接获取到remainhrs的计算值。

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