如何解决这个axios post请求？

crcmnpdw 于 12个月前发布在 iOS

关注(0)|答案(2)|浏览(89)

我试图将表单数据发送到后端，并在服务器控制台中看到它，当我提交表单时，我在前端控制台中没有任何错误，但我没有看到任何信息正在发送的迹象，我在哪里犯了错误？

<Formik
                                initialValues={{
                                  firstName: "",
                                  lastName: "",
                                  email: "",
                                  Password: "",
                                  ConfirmPassword: "",
                                }}
                                validationSchema={SignupSchema}
                                // on submit handles here
                                onSubmit={async (values) => {
                                  console.log("logging click");
                                  const {
                                    firstName,
                                    lastName,
                                    email,
                                    Password,
                                    ConfirmPassword,
                                  } = values;
                                  const data = new FormData();

                                  data.append("firstName", firstName);
                                  data.append("lastName", lastName);
                                  data.append("email", email);
                                  data.append("Password", Password);
                               data.append("ConfirmPassword",ConfirmPassword);                        
                                  //   axios post requst to back end happens here

                                  const form = document.querySelector("form");
                                  if (form) {
                                    form.addEventListener("submit", (e) => {
                                      e.preventDefault();
                                      const FormData = new FormData(form);
                                      axios.post(
                                          "                                       
                                   "http://localhost:8080/api/admin/signup",
                                          FormData,
                                          {
                                            headers: {
                                              "Content-Type":
                                                "multipart/form-data",
                                            },
                                          }
                                        )
                                        .then((res) => {
                                          console.log(res);
                                        })
                                        .catch((err) => {
                                          console.log(err);
                                        });
                                    });
                                  }

                                  // same shape as initial values
                                }}
                              >

字符串

axios

来源：https://stackoverflow.com/questions/77664419/how-can-i-resolve-this-axios-post-request

2条答案

按热度按时间

zd287kbt1#

代码似乎试图发送表单数据两次-一次使用axios.post方法，另一次使用单独的事件侦听器进行表单提交。这可能会导致混淆和请求问题。
尝试直接使用onSubmit中的axios.post提交表单，并删除您正在添加的addbox。下面是更新的代码。希望它能工作

<Formik
  initialValues={{
    firstName: "",
    lastName: "",
    email: "",
    Password: "",
    ConfirmPassword: "",
  }}
  validationSchema={SignupSchema}
  onSubmit={async (values) => {
    console.log("logging click");
    const {
      firstName,
      lastName,
      email,
      Password,
      ConfirmPassword,
    } = values;

    const formData = new FormData();
    formData.append("firstName", firstName);
    formData.append("lastName", lastName);
    formData.append("email", email);
    formData.append("Password", Password);
    formData.append("ConfirmPassword", ConfirmPassword);

    try {
      const res = await axios.post(
        "http://localhost:8080/api/artist",
        formData,
        {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        }
      );
      console.log(res);
    } catch (err) {
      console.log(err);
    }
  }}
>

字符串
作为参考，您可以在发出post请求的同时，前往浏览器开发者控制台并访问网络选项卡。如果有多个请求，则表明您的代码正在发出冗余请求。

赞(0）回复(0）举报 12个月前

w80xi6nr2#

看起来你在表单提交处理中有嵌套的事件侦听器和一些不必要的代码，这可能是导致问题的原因。下面是如何使用Axios和Formik将表单数据发送到后端的简化版本：

赞(0）回复(0）举报 12个月前