reactjs - 以反应钩子形式发布请求未获取用户输入

问题描述

我正在处理地址簿，并且我已经从这个 API url 中获取了所有数据：

https://jsonplaceholder.typicode.com/users

API 不能真正被修改，但根据文档中的这条消息，它应该表现得“像 if”：“资源不会在服务器上真正更新，但它会像假一样被伪造。”

我已经设置了反应挂钩表单，但是当我提交表单时，这就是我在开发工具选项卡网络中得到的？此时不应该显示用户输入而不是所有字段的空字符串？id 是唯一被更新的东西。我的提交功能或实际提取有什么问题吗？我可以在这个组件中进行 POST 获取，我也有我的表单，还是应该在我有 GET 请求的同一个组件中？

这是处理 POST 请求的好方法吗？

const NewUserForm = () => {
     
  const { register, handleSubmit, formState: { errors } } = useForm();
     
  const onSubmit = () => {

    fetch(URL, {
      method: 'POST',
      body: JSON.stringify({
        id:'',
        name: '',
        email: '',
        address1:'',
        address2:'',
        city:'',
        phone:''    
      }),
        headers: {
          'Content-type': 'application/json; charset=UTF-8'
        },
    })
      .then((response) => response.json())
      .then((json) => console.log(json)); 
  }
  
    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>
      </>  
    );
}

标签： reactjsrequestfetchfetch-api

好的，在检查了 react-hook-form 文档之后，这是一个可能的解决方案：

在文档中，它说您的 onSubmit 将有一个数据参数：

  const onSubmit = (data) => alert(JSON.stringify(data));

这意味着您也可以在 onSubmit 中使用它。尝试更改您的 onSubmit 以使用 data 参数：

  const onSubmit = (data) => {
    fetch(URL, {
      method: 'POST',
      body: JSON.stringify(data),

并恢复我之前建议的关于handleSubmit. 这是对的：

    <Form onSubmit={handleSubmit(onSubmit)}>

reactjs - 以反应钩子形式发布请求未获取用户输入

问题描述

解决方案

推荐阅读