Reactjs 如何在React中使用表单进行post请求

在我填写输入并提交表单后，我想用React发出一个POST请求。当我在带有静态名称和作业值的

handleSubmit

函数之外使用

fetch

时，它会工作。但是如果我在

handleSubmit

函数中使用，它就不起作用了。为什么？我怎样才能解决这个问题

import React from "react";

function CreateUser() {
  const handleSubmit = (e) => {
    e.preventDefault();
    fetch("https://reqres.in/api/users", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        name: `${e.target.name.value}`,
        job: `${e.target.job.value}`,
      }),
    })
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Name</label>
      <input id="name" name="name" type="text" />

      <label htmlFor="job">job</label>
      <input id="job" name="job" type="text" />
      <input type="submit" value="submit" />
    </form>
  );
}

export default CreateUser;

从“React”导入React；
函数CreateUser（）{
常量handleSubmit=（e）=>{
e、 预防默认值（）；
取回（“https://reqres.in/api/users", {
方法：“张贴”，
标题：{
接受：“应用程序/json”，
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify({
名称：`${e.target.name.value}`，
作业：`${e.target.job.value}`，
}),
})
。然后（（res）=>{
控制台日志（res）；
})
.catch（（错误）=>{
控制台日志（err）；
});
};
返回(
名称
工作
);
}
导出默认CreateUser；

您能检查一下如何正确使用

获取

吗。你需要回复

您的react代码似乎很好，但不确定如何处理成功和错误

检查我使用您的代码创建的以下沙箱

---

当您检查开发工具中的“网络”选项卡时，是否正在进行呼叫？如果是这样，您是否可以检查请求数据以确保它正在发送来自您输入的值？