我想要一个表单,它会返回一个错误消息,如电子邮件/密码不正确,现在没有显示,如果我输入错误的凭据。
`const loginSchema = yup.object().shape({
email: yup.string().email("invalid email").required("required"),
password: yup.string().required("required"),
});
...
const initialValuesLogin = {
email: "",
password: "",
};
...
这是我的登录功能,我试图测试并发送错误消息,但没有显示:
const Form = () => {
const login = async (values, onSubmitProps) => {
const loggedInResponse = await fetch("http://localhost:3001/auth/login", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(values),
})
const loggedIn = await loggedInResponse.json();
onSubmitProps.resetForm();
if (loggedIn && loggedIn.error) {
onSubmitProps.setErrors({ email: "Invalid email or password" });
} else if (loggedIn) {
dispatch(
setLogin({
user: loggedIn.user,
token: loggedIn.token,
})
);
navigate("/home");
}
};
}
这是formik,我后来对文本字段的电子邮件和密码,他们不显示一个错误,如果没有填写,因为它的要求或电子邮件格式不正确
return (
<Formik
onSubmit={handleFormSubmit}
initialValues={isLogin ? initialValuesLogin : initialValuesRegister}
validationSchema={isLogin ? loginSchema : registerSchema}
>
这是服务器端代码:
export const login = async (req, res) => {
try {
const { email, password } = req.body;
const user = await User.findOne({ email: email });
if (!user) return res.status(400).json({ msg: "User does not exist. " });
const isMatch = await bcrypt.compare(password, user.password);
if (!isMatch) return res.status(400).json({ msg: "Invalid credentials. " });
const token = jwt.sign({ id: user._id }, process.env.JWT_SECRET);
delete user.password;
res.status(200).json({ token, user });
} catch (err) {
res.status(500).json({ error: err.message });
}
};
1条答案
按热度按时间alen0pnh1#
这与formik无关,而是与axios错误处理有关。您应该更新您的调用函数以使用try catch块,然后检查错误代码是否为400(对于无效凭据)
最好的解决方案是在应用程序中创建全局错误处理
我建议您创建一个Alert组件来显示http错误消息,Formik和Yup更适合表单验证,而不适合Axios错误处理