React登录表单密码长度验证失效问题排查

问题描述 #

登录组件中，按钮启用/禁用需同时满足邮箱、密码字段验证通过。邮箱验证正常，但密码字段存在异常：当密码长度达到8位及以上时按钮启用，删除字符使长度回到8位以下后，按钮仍保持启用状态，不符合预期规则。

成因分析 #

1. 密码长度判断逻辑错误：在validateFields函数的密码验证分支中，判断条件为fieldValue.length <7，这意味着只有当密码长度小于7位时才会标记为无效。但需求是小于8位即禁用按钮，条件阈值错误导致长度为7位的密码会被判定为有效。

2. 状态更新竞态冲突：

   • 在changeHandler中同步调用setFormData、validation、checkSubmitButton，但React的setState是异步操作，checkSubmitButton执行时可能拿到的还是旧的表单状态。
   • validateFields内部直接修改submitDisabled状态，同时checkSubmitButton也在修改该状态，两者的异步更新会相互覆盖。例如密码从8位降到7位时，validateFields设置submitDisabled: true，但后续checkSubmitButton可能因拿到旧的passwordIsValid: true，又将submitDisabled设为false，导致按钮状态异常。

修复方案 #

1. 修正密码长度判断条件 #

修改validateFields中密码验证的长度判断逻辑，同时移除内部直接修改submitDisabled的代码，统一由状态监听来管理按钮状态：

export const validateFields = (fieldName, fieldValue, setForm) => {
    if (fieldName === "email") {
      const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
      const isValid = emailRegex.test(fieldValue);
      if (!isValid && fieldValue !== "") {
        setForm((prevFromData) => {
          return {
            ...prevFromData,
            error: true,
            errorMessage: "Email must be in a valid format",
            emailIsValid: false,
            fieldType: "email",
          };
        });
      } else {
        setForm((prevFromData) => {
          return {
            ...prevFromData,
            error: false,
            errorMessage: "",
            emailIsValid: true,
            fieldType: "email",
          };
        });
      }
    }

    if (fieldName === "password") {
      if (fieldValue.length < 8 ) { // 修正为小于8位判定无效
        setForm((prevFromData) => {
          return {
            ...prevFromData,
            error: true,
            passwordIsValid: false,
            fieldType: "password",
          };
        });
      } else{
        setForm((prevFromData) => {
          return {
            ...prevFromData,
            error: false,
            passwordIsValid: true,
            fieldType: "password",
          };
        });
      }
    }
  };

2. 用useEffect监听状态更新按钮 #

在Login组件中，移除checkSubmitButton的同步调用，改用useEffect监听emailIsValid和passwordIsValid的变化，确保拿到最新状态后更新按钮：

import React, { useContext, useEffect } from "react";
import Button from "@mui/material/Button";
import { Link } from "react-router-dom";
import Container from "@mui/material/Container";
import TextFieldComponent from "./textField/textField.component";
import InputComponent from "./input/input.component";
import AuthContext from "../../context/auth.context";


const Login = () => {
  const containerStyles = {
    display: "flex",
    justifyContent: "space-between",
    padding: "0px",
  };

  const { toggleButtonDisabled, validation, setFormData, formData } = useContext(AuthContext);
   
  // 监听验证状态变化，更新按钮禁用状态
  useEffect(() => {
    toggleButtonDisabled(!(formData.emailIsValid && formData.passwordIsValid));
  }, [formData.emailIsValid, formData.passwordIsValid, toggleButtonDisabled]);

  const changeHandler = (event) => {
    const { name, value } = event.target;
    setFormData(name, value);
    validation(name, value);
  };


  return (
    <>
      <form action="">
        <TextFieldComponent
          name="email"
          label="Email"
          error={formData.fieldType === 'email' ? formData.error : ''}
          changeHandler={changeHandler}
        />

        <InputComponent
          name="password"
          label="Password"
          error={formData.fieldType === 'password' ? formData.error : ''}
          changeHandler={changeHandler}
        />
        <Container style={containerStyles} maxWidth="100%">
          <Link style={{ marginTop: "3px" }} component="button">
            Forgot Password ?
          </Link>
          <Button disabled={formData.submitDisabled} variant="contained">
            Sign In
          </Button>
        </Container>
      </form>

      <Container style={{ textAlign: "center", marginTop: "35px" }}>
        <span style={{ width: "100%", textAlign: "center", padding: "5px" }}>
          Don't have an account?
        </span>
        <Link to="/signup">Sign Up</Link>
      </Container>
    </>
  );
};

export default Login;

内容的提问来源于stack exchange，提问作者W3bNinja