Action 函数中的 fetch() API 不起作用

Question

我已经使用 Postman 彻底测试了后端，它响应正确。然而，尽管进行了大量的调试工作，前端仍然没有收到预期的响应。我多次检查了代码，但无法找出问题所在。任何见解或建议将不胜感激。

import { useEffect, useRef, useState } from "react";
import { useNavigate, Link, Form } from "react-router-dom";

import Card from "../Utility/Card";
import "./Authentication.css";
import { validateEmail, validatePassword } from "../Utility/Validator";

const SignupPage = () => {
  const [emailIsValid, setEmailIsValid] = useState(true);
  const [passwordIsValid, setPasswordIsValid] = useState(true);
  const [confirmPasswordIsValid, setConfirmPasswordIsValid] = useState(true);

  const emailInputRef = useRef();
  const passwordInputRef = useRef();
  const confirmPasswordInputRef = useRef();

  useEffect(() => {
    emailInputRef.current.focus();
  }, []);

  // const navigate = useNavigate();

  let isEmail;
  let isPassword;

  const formSubmitHandler = (e) => {
    e.preventDefault();

    const enteredEmail = emailInputRef.current.value;
    const enteredPassword = passwordInputRef.current.value;
    const enteredConfirmPassword = confirmPasswordInputRef.current.value;

    isEmail = validateEmail(enteredEmail);
    isPassword = validatePassword(enteredPassword);

    if (!isEmail) {
      setEmailIsValid(false);
    }

    if (!isPassword) {
      setPasswordIsValid(false);
    }

    if (enteredConfirmPassword !== enteredPassword) {
      setConfirmPasswordIsValid(false);
    }
  };

  const emailChangeHandler = () => {
    setEmailIsValid(true);
  };
  const passwordChangeHandler = () => {
    setPasswordIsValid(true);
  };
  const confirmPasswordChangeHandler = () => {
    setConfirmPasswordIsValid(true);
  };

  return (
    <Card className="form-container">
      <div className="form">
        <h3>Signup</h3>
        <Form method="POST" onSubmit={formSubmitHandler} noValidate>
          <label htmlFor="email">Email</label>
          <input
            type="email"
            id="email"
            name="email"
            ref={emailInputRef}
            onChange={emailChangeHandler}
            style={!emailIsValid ? { border: "1px red solid" } : {}}
          />
          {!emailIsValid && (
            <p className="error-message">Enter a valid email.</p>
          )}
          <label htmlFor="password">Password</label>
          <input
            type="password"
            id="password"
            name="password"
            ref={passwordInputRef}
            onChange={passwordChangeHandler}
            style={!passwordIsValid ? { border: "1px red solid" } : {}}
          />
          {!passwordIsValid && (
            <p className="error-message">
              Password should be at least 5 characters.
            </p>
          )}
          <label htmlFor="confirmPassword">Confirm Password</label>
          <input
            type="password"
            id="confirmPassword"
            name="confirmPassword"
            ref={confirmPasswordInputRef}
            onChange={confirmPasswordChangeHandler}
            style={!confirmPasswordIsValid ? { border: "1px red solid" } : {}}
          />
          {!confirmPasswordIsValid && (
            <p className="error-message">
              Not matching with the entered password.
            </p>
          )}
          <button type="submit">Submit</button>
          <p>
            Already signed up? <Link to="/auth/login">Login</Link>
          </p>
        </Form>
      </div>
    </Card>
  );
};

export default SignupPage;

export const action = async ({ params, request }) => {
  const data = await request.formData();

  const signupData = {
    email: data.get("email"),
    password: data.get("password"),
    confirmPassword: data.get("confirmPassword"),
  };

  const res = await fetch("http://localhost:8080/auth/signup", {
    method: "POST",
    body: JSON.stringify(signupData),
    headers: {
      "Content-Type": "application/json",
    },
  });

  console.log(res);
};

Answer 1

除非我缺少您正在使用的外部包，否则

formSubmitHandler

负责提交您的表单字段并从您的代码发送 API 请求，因此您的获取请求应该位于

formSubmitHandler

内，因为它不会调用

action() 

其他任何地方。

为什么不直接使用表单字段并获取请求？像下面这样⬇️

const formSubmitHandler = async (e) => {
    e.preventDefault();

    const enteredEmail = emailInputRef.current.value;
    const enteredPassword = passwordInputRef.current.value;
    const enteredConfirmPassword = confirmPasswordInputRef.current.value;

    ...//all previous code

   else {
    const signupData = {
       email: enteredEmail,
       password: enteredPassword,
       confirmPassword: enteredConfirmPassword,
    };

    const res = await fetch("http://localhost:8080/auth/signup", {
       method: "POST",
       body: JSON.stringify(signupData),
       headers: {
          "Content-Type": "application/json",
       },
    });

    console.log(res);      
  };