我无法使用 Redux-Toolkit RTK 查询发出 post 请求

Question

我几天前开始学习RTK查询，我想向我的后端发出一个post请求。但出于某种原因，我的后端不接受来自前端的数据，并且我不断收到错误消息，提示姓名、电子邮件和密码不正确。我的后端没有任何问题，因为我之前使用过 useContext 并且一切正常。

这是我提出请求的地方

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


import { createApi } from "@reduxjs/toolkit/query/react";
import axiosBaseQuery from "./axiosBaseQuery";

export const fetcherApi = createApi({
  reducerPath: "fetcherApi",
  baseQuery: axiosBaseQuery({
    baseUrl: "http://localhost:5000/",
  }),
  endpoints(build) {
    return {
      registerUser: build.mutation({
      //I tried putting the "form" inside a curly braces bracket, it still keep throwing error
        query: (form) => ({
          url: "register",
          method: "post",
          body: form,
          headers: {
            "Content-type": "application/json; charset=UTF-8",
          },
        }),
      }),
    };
  },
});

export const {
  useRegisterUserMutation,
} = fetcherApi;

这是我的前端，我在其中传递数据。我在 submitUser 函数中提交了表单

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import Link from "next/link";
import React, { useState } from "react";
import { AiOutlineCar } from "react-icons/ai";
import { BsEye, BsEyeSlash } from "react-icons/bs";
import { useRouter } from "next/router";
import { useRegisterUserMutation } from "@/store/ReduxStore/fetcherApi";

function Login() {
  const [registerUser] = useRegisterUserMutation();

  const [showPassword, setShowPassword] = useState("password");
  const [name, setName] = useState("");
  const [nameError, setNameError] = useState("");
  const [email, setEmail] = useState("");
  const [emailError, setEmailError] = useState("");

  const [password, setPassword] = useState("");
  const [passwordOneError, setPasswordOneError] = useState("");
  const [secPassword, setSecPassword] = useState("");
  const [secPasswordError, setSecPasswordError] = useState("");

  const router = useRouter();
  const form = {
    name,
    email,
    password,
  };

  const nameChange = (e) => {
    setName(e.target.value);
    e.target.value < 1 ? setNameError("Name is required") : setNameError("");
  };

  const emailChange = (e) => {
    setEmail(e.target.value);
    e.target.value < 1 ? setEmailError("Name is required") : setEmailError("");
  };

  const passwordOneChange = (e) => {
    setPassword(e.target.value);
    e.target.value < 1
      ? setPasswordOneError("Name is required")
      : setPasswordOneError("");
  };

  const passwordTwoChange = (e) => {
    setSecPassword(e.target.value);
    e.target.value < 1
      ? setSecPasswordError("Name is required")
      : setSecPasswordError("");

    e.target.value !== password
      ? setSecPasswordError("Password didnot match")
      : setSecPasswordError("");
  };

  const showPasswordHandler = () => {
    if (showPassword === "password") {
      setShowPassword("text");
    } else {
      setShowPassword("password");
    }
  };

  const submitUser = async (e) => {
    e.preventDefault();
    secPassword !== password
      ? setSecPasswordError("Password didnot match")
      : setSecPasswordError("");

    //form was submitted here
    await registerUser(form);

    router.push("/profile");
  };

  const thedate = new Date();
  const year = thedate.getFullYear();

  return (
    <div className="authbackground">
      <div className="flex flex-col mt-3 mx-auto w-4/5  items-center justify-center">
        <div className="flex-shrink-0 cursor-default p-2 flex items-center">
          <AiOutlineCar className="text-8xl mx-auto text-blue-400" />
          <h1 className="text-white text-6xl mx-auto font-logo-font">Big-C</h1>
        </div>
        <div className="bg-white shadow rounded xl:w-1/3  md:w-1/2 w-full p-10 mt-16">
          <p
            aria-label="Login to your account"
            className="text-2xl font-extrabold leading-6 text-gray-800"
          >
            Create an account
          </p>

          <form onSubmit={submitUser}>
            <div className="mt-5">
              <label htmlFor="name" className="authformlabel">
                Name
              </label>
              {/*_________Name_______*/}
              <input
                placeholder="Enter email adress"
                type="name"
                className="authform"
                onChange={nameChange}
                value={name}
                onBlur={() =>
                  name < 1 ? setNameError("Name is required") : setNameError("")
                }
              />
              <p className="formerror">{nameError}</p>
            </div>
            <div className="mt-5">
              <label htmlFor="email" className="authformlabel">
                Email
              </label>
              {/*_________Email_______*/}
              <input
                placeholder="Enter email adress"
                type="email"
                className="authform"
                onChange={emailChange}
                value={email}
                onBlur={() =>
                  email < 1
                    ? setEmailError("Email is required")
                    : setEmailError("")
                }
              />
              <p className="formerror">{emailError}</p>
            </div>
            <div className="mt-6  w-full">
              <label htmlFor="passwordOne" className="authformlabel">
                Password
              </label>
              <div className="showpasswordicon">
                {/*_________PasswordOne_______*/}
                <input
                  placeholder="Enter Password"
                  type={showPassword}
                  className="authform"
                  onChange={passwordOneChange}
                  value={password}
                  onBlur={() =>
                    password < 1
                      ? setPasswordOneError("Password is required")
                      : setPasswordOneError("")
                  }
                />

                <button
                  type="button"
                  onClick={showPasswordHandler}
                  className="formshowpassword"
                >
                  {showPassword === "password" && <BsEye />}
                  {showPassword === "text" && <BsEyeSlash />}
                </button>
              </div>
              <p className="formerror">{passwordOneError}</p>
              <label htmlFor="passwordTwo" className="authformlabel">
                Re-type Password
              </label>
              <div className="showpasswordicon">
                {/*_________PasswordTwo_______*/}
                <input
                  placeholder="Re-enter Password"
                  type={showPassword}
                  className="authform"
                  onChange={passwordTwoChange}
                  value={secPassword}
                  onBlur={() =>
                    secPassword < 1
                      ? setSecPasswordError("Password is required")
                      : setSecPasswordError("")
                  }
                />

                <button
                  type="button"
                  onClick={showPasswordHandler}
                  className="formshowpassword"
                >
                  {showPassword === "password" && <BsEye />}
                  {showPassword === "text" && <BsEyeSlash />}
                </button>
              </div>
              <p className="formerror">{secPasswordError}</p>
            </div>
            <div className="mt-8">
              <button aria-label="create my account" className="authformbutton">
                Create an account
              </button>
            </div>
          </form>
          <p className="text-sm mt-4 font-medium leading-none text-gray-500">
            Already have an account?{" "}
            <span
              role="link"
              className="text-sm font-medium leading-none underline text-gray-800 cursor-pointer"
            >
              <Link href="/login">Login here</Link>
            </span>
          </p>
        </div>
      </div>
      <footer className="py-16 flex flex-col justify-center items-center">
        <p className="mt-2 text-xs xl:text-sm leading-none text-gray-50">
          <span>{year}</span> Big-C. All Rights Reserved.
        </p>
      </footer>
    </div>
  );
}

export default Login;

请帮帮我。谢谢

Answer 1

我能够通过将正文更改为数据来解决它，并且我在按钮和表单中都使用了提交表单的功能。像这样：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

    export const fetcherApi = createApi({
      reducerPath: "fetcherApi",
      baseQuery: axiosBaseQuery({
        baseUrl: "http://localhost:5000/",
      }),
      endpoints(build) {
        return {
          registerUser: build.mutation({
          //I tried putting the "form" inside a curly braces bracket, it still keep throwing error
            query: (form) => ({
              url: "register",
              method: "post",
              
              //I change body to data
              
              data: form,
              headers: {
                "Content-type": "application/json; charset=UTF-8",
              },
            }),
          }),
        };
      },
    });
    
    //Here is the function for submitting
    
      const submitUser = async (e) => {
    e.preventDefault();
    secPassword !== password
      ? setSecPasswordError("Password didnot match")
      : setSecPasswordError("");

    await registerUser(form);
    router.push("/profile");
    setName("");
    setEmail("");
    setPassword("");
    setSecPassword("");
  };
    
//So I put it inside both button and form

<form onSubmit={submitUser}>
{/*All your input ....*/}
<button onClick={submitUser}></button>
<form/>

我无法使用 Redux-Toolkit RTK 查询发出 post 请求

I was unable to make a post request with Redux-Toolkit RTK Query

node.js

reactjs

redux

next.js

redux-toolkit