我希望你们都平安。我的问题:url工作正常,没有未定义的url错误。当我输入了良好的凭证时,它工作正常,并将我带到我希望的位置。但每当我试图查看错误时,它都不会出现。甚至,在if条件下,我尝试console.log(res.data.errors),但什么也没有显示。即使是console.log(“hello it not working”)在if条件下也无法工作。。。我很困惑。你能帮忙吗?但其他方法也可以。请问我做错了什么?
import React, { useState } from "react";
import { Link } from "react-router-dom";
import SideBar from "../components/SideBar";
import "./profil.css";
import axios from "axios";
function Profil() {
const [username, setUsername] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const handleLogin = (e) => {
e.preventDefault();
const emailError = document.querySelector(".email.error");
const passwordError = document.querySelector(".password.error");
axios({
method: "post",
url: `${process.env.REACT_APP_API_URL}api/user/login`,
withCredentials: true,
data: {
email,
password,
},
})
.then((res) => {
if (res.data.errors) {
emailError.innerHTML = res.data.errors.email;
passwordError.innerHTML = res.data.errors.password;
} else {
window.location = "/";
}
})
.catch((err) => {
if (err.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
console.log(err.response.data);
console.log(err.response.status);
console.log(err.response.headers);
} else if (err.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
console.log(err.request);
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', err.message);
}
console.log(err.config);
});
};
return (
<>
<SideBar />
<div className="form-container">
<input type="checkbox" id="flip" />
<div className="cover">
<div className="front">
<img src="dog-4977599_1920.jpg" alt="" />
<div className="text">
<span className="text-i">Welcome to ChablisLAB</span>
<span className="text-j">Please Login before continue</span>
</div>
</div>
<div className="back">
<img className="backImg" src="diary-92652_1920.jpg" alt="" />
<div className="text">
<span className="text-i">Welcome to ChablisLAB</span>
<span className="text-j">Just a few step to gain access</span>
</div>
</div>
</div>
<form>
<div className="form-content">
<div className="login_form">
<div className="title">Login</div>
<div className="input_boxes">
<div className="input_box">
<i className="bx bx-envelope"></i>
<input
type="email"
onChange={(e) => setEmail(e.target.value)}
value={email}
placeholder="Enter your email"
/>
</div>
<div className="email error"></div>
<div className="input_box">
<i className="bx bxs-lock"></i>
<input
type="password"
onChange={(e) => setPassword(e.target.value)}
value={password}
placeholder="Password"
/>
</div>
<div className="password error"></div>
<div className="box_forgot_pass">
<Link to="#">Forgot password?</Link>
</div>
<div className="button input_box">
<input onClick={handleLogin} type="submit" value="Login" />
</div>
<div className="text sign-up-text">
Don't have an account?
<label htmlFor="flip">Signup now</label>
</div>
</div>
</div>
</div>
</form>
</div>
</>
);
}
export default Profil;
.error{
color: red;
}
<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>
1条答案
按热度按时间zynd9foi1#
我认为在添加if条件之前,需要先控制台res.data.errors。您可能会在错误的属性上设置条件,而这些条件不会作为响应得到回报。