如何解决我的react-appwrite应用程序中的此错误？

Question

import React, { useEffect, useRef } from "react";
import { Link, useNavigate } from "react-router-dom";
import { useAuth } from "../../utils/AuthContext";
import "./loginPages.css";
const StudentLogin = () => {
 const navigate = useNavigate();
 const { user, loginUser } = useAuth();

 const loginForm = useRef(null);

 useEffect(() => {
  if (user) {
  navigate("/protect");
 }
 }, []);

 const handleSubmit = (e) => {
  e.preventDefault();
  const email = loginForm.current.email.value;
  const password = loginForm.current.password.value;

  const userInfo = { email, password };
  loginUser(userInfo);
 };
 return (
 <div className="login container">
   <div className="wrapper">
     <div className="login-container">
       <div className="login-wrapper">
         <h2 className="login-header">
           <Link to="/protect">Login</Link>
         </h2>
         <form ref={loginForm} onSubmit={handleSubmit}>
           <div>
             <label>Username</label>
            <input type="email" className="text-input" required />
           </div>
           <div>
             <label>Password</label>
             <input type="password" className="text-input" required />
           </div>

           <div className="checkbox">
             <label htmlFor="#">
               {" "}
               <input type="checkbox" />
               Remember me
             </label>
           </div>
           <input type="submit" value="Login" className="login-btn btn" />
         </form>

         <div className="or">
           <hr className="bar" />
           <span>OR</span>
           <hr className="bar" />
         </div>
         <Link to="/prtportal" className="other-btn">
           Login as Parent
         </Link>
       </div>

       <footer className="login-footer">
         <p>Copyright &copy; 2023 Azure. All rights reserved.</p>
         <div>
           <Link className="login-footer-link" to="/">
             Terms of Use
          </Link>{" "}
          |{" "}
          <Link className="login-footer-link" to="/">
            Privacy Policy
          </Link>
        </div>
      </footer>
    </div>
   </div>
 </div>
 );
 };

 export default StudentLogin;

 
//AuthContext page//

import { useContext, useState, useEffect, createContext } from "react";
import { account } from "../appwriteConfig";
const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
 const [loading, setLoading] = useState(true);
 const [user, setUser] = useState(null);

 useEffect(() => {
  setLoading(false);
 }, []);

 const loginUser = async (userInfo) => {
  setLoading(true);

 try {
   let response = await account.createEmailSession(
     userInfo.email,
     userInfo.password
   );

   let accountDetails = await account.get();

   console.log("accountDetails:", accountDetails);
   setUser(accountDetails);
   } catch (error) {
   console.error(error);
   }
   setLoading(false);
 };

const logoutUser = () => {};

const checkUserStatus = () => {};

const contextData = {
 user,
 loginUser,
 logoutUser,
};

return (
 <AuthContext.Provider value={contextData}>
   {loading ? <p> loading...</p> : children}
 </AuthContext.Provider>
 );
};

export const useAuth = () => {
return useContext(AuthContext);
};

export default AuthContext;

我正在尝试在 ReactJS 上使用 Appwrite 构建身份验证，但当我尝试通过输入以下内容登录应用程序时，出现错误：“loginForm.current.email 未定义”和“loginForm.current.password 未定义”形式，我不明白错误来自哪里。 一切工作正常，我没有遇到错误，所以我不认为错误来自其他文件。

Answer 1

出现错误“loginForm.current.email 未定义”是因为您尝试在完全初始化之前访问登录表单引用中的电子邮件输入元素。

const handleSubmit = (e) => {
  e.preventDefault();
  const email = loginForm.current?.email?.value; 
  const password = loginForm.current?.password?.value; 

  if (email && password) { 
    const userInfo = { email, password };
    loginUser(userInfo);
  } else {
    // Handle missing email or password 
  }
};