React Hook Form提交POST请求无法获取用户输入如何解决

问题根因 #

提交的请求体全为空是因为两处写法错误：

1. onSubmit 函数没有接收React Hook Form收集的表单数据参数，handleSubmit 触发回调时会把所有注册的表单输入值作为第一个参数传入，你没有接收这个参数。
2. 你直接在 JSON.stringify 内硬编码了所有字段为空字符串，导致提交的内容全为空，返回的id是jsonplaceholder接口自动生成的，和你提交的空id无关。

修复方案 #

修改后的代码如下：

const NewUserForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm();
  // 接收handleSubmit传入的表单数据
  const onSubmit = (data) => {
    fetch('https://jsonplaceholder.typicode.com/users', {
      method: 'POST',
      // 直接传入收集到的表单数据，不需要手动写空字段，id由服务端生成无需提交
      body: JSON.stringify(data),
      headers: {
        'Content-type': 'application/json; charset=UTF-8'
      },
    })
    .then((response) => response.json())
    .then((json) => console.log(json))
    .catch((err) => console.error('提交失败：', err)); // 增加错误捕获
  }
  
  return (
    <>
      <Header>New user</Header>
      <FormContainer>
        <Form onSubmit={handleSubmit(onSubmit)}>      
          <input type="text" placeholder="name"  {...register("name", { required: true })} />
          {errors.name && <span>This field is required</span>}

          <input type="text" placeholder="email" {...register("email", { required: true })} />
          {errors.email && <span>This field is required</span>}

          <input type="text" placeholder="address1"{...register("address1", { required: true })} />
          {errors.address1 && <span>This field is required</span>}

          <input type="text" placeholder="address2"{...register("address2", { required: true })} />
          {errors.address2 && <span>This field is required</span>}

          <input type="text" placeholder="city"{...register("city", { required: true })} />
          {errors.city && <span>This field is required</span>}
          
          <input type="text" placeholder="phone"{...register("phone", { required: true })} />
          {errors.phone && <span>This field is required</span>}
          
          <input type="submit" />
        </Form>
      </FormContainer>
    </>  
  );
}

请求存放位置说明 #

POST请求写在当前表单组件中是合理的，符合单一职责设计原则，不需要强制和GET请求放在同一个组件。如果后续有多个组件需要复用新增用户的逻辑，可以把POST请求抽离为独立的API工具函数，供需要的组件引入调用即可。

额外优化建议 #

• jsonplaceholder的/users接口返回的地址为嵌套结构，你当前拆分的address1、address2、city字段需要对应组装为接口要求的address对象结构，避免后续和GET请求拉取的数据结构不匹配，导致渲染异常。
• 建议添加请求加载状态、错误捕获逻辑，避免重复提交，同时可以给用户明确的操作反馈。

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