Next.js+AdminLTE登录表单提交失效及重复渲染问题修复

你的代码有两个核心问题导致onSubmit事件无法触发：

• 缺少表单提交触发元素：表单里没有<button type="submit">这类能触发提交动作的按钮，浏览器没有触发onSubmit回调的入口。
• JSX标签未完整闭合：<form>、<div className="card-body">、<div className="card">等多个标签都没有闭合，React渲染时会出现结构异常，组件无法正常工作。

修复后的完整代码：

const Login = () => {
  console.log("Login component rendered"); 

  const router = useRouter();
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [error, setError] = React.useState("");

  const handleInputChange = (setter) => (e) => {
    console.log(`Setting value: ${e.target.value}`); 
    setter(e.target.value);
  };

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

    console.log("Form submitted");
    console.log(`Email: ${email}, Password: ${password}`); 

    if (email === "test" && password === "test") {
      console.log("Login successful!");
      localStorage.setItem("isLoggedIn", "true");
      router.push("/");
    } else {
      console.log("Login failed!");
      setError("Hatalı giriş.");
    }
  };

  return (
    <div className="login-box">
      <div className="card card-outline card-primary">
        <div className="card-header text-center">
          <a href="/" className="h1">
            <b>Admin</b>LTE
          </a>
        </div>
        <div className="card-body">
          <p className="login-box-msg">Sign in to start your session</p>

          <form onSubmit={handleLogin}>
            <div className="input-group mb-3">
              <input
                type="email"
                className="form-control"
                placeholder="Email"
                value={email}
                onChange={handleInputChange(setEmail)} 
                required
              />
              <div className="input-group-append">
                <div className="input-group-text">
                  <span className="fas fa-envelope" />
                </div>
              </div>
            </div>
            <div className="input-group mb-3">
              <input
                type="password"
                className="form-control"
                placeholder="Password"
                value={password}
                onChange={handleInputChange(setPassword)} 
                required
              />
              <div className="input-group-append">
                <div className="input-group-text">
                  <span className="fas fa-lock" />
                </div>
              </div>
            </div>
            {/* 新增提交按钮，触发表单提交 */}
            <div className="row">
              <div className="col-4 offset-8">
                <button type="submit" className="btn btn-primary btn-block">Sign In</button>
              </div>
            </div>
            {/* 渲染错误提示 */}
            {error && <div className="mt-3 text-danger">{error}</div>}
          </form>
        </div>
      </div>
    </div>
  );
};

export default Login;

说明：

1. 补充了type="submit"的按钮，点击后即可触发表单的onSubmit事件。
2. 闭合了所有未关闭的JSX标签，确保组件结构完整可正常渲染。
3. 新增了错误信息的渲染逻辑，登录失败时能直观显示错误提示。

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