我有一个登录组件,但收到该错误:无法在未安装的组件上执行 React 状态更新。这是一个空操作,但它表明内存泄漏。我用谷歌搜索错误,发现有些人有同样的问题,我试图像他们一样解决它,但它对我不起作用。为什么我有这个错误,我该如何解决?谢谢
组件登录
import React, { useState, useContext, useEffect } from "react";
import { useLocation } from "wouter";
import logic from "../../logic";
import { AuthContext } from "../../context/AuthContext";
import validate from "./validateRulesLogin";
import literals from "../../common/i18n/literals";
import "./index.css";
export default function Login(language) {
const [, setAuth] = useContext(AuthContext);
const [, pushLocation] = useLocation();
const [messageError, setMessageError] = useState("");
const [errorsValidateForm, setErrorsValidateForm] = useState({});
const [isSubmitting, setIsSubmitting] = useState(false);
const [data, setData] = useState({ email: "", password: "" });
const { lang } = language;
const { login_notRegister } = literals;
useEffect(() => {}, [errorsValidateForm, isSubmitting]);
let isCancelled = false;
async function handleOnSubmit(e) {
e.preventDefault();
if (!isSubmitting) {
let errorsForm = validate(data, lang);
if (Object.keys(errorsForm).length === 0 && !isCancelled) {
setIsSubmitting(true);
const { email, password } = data;
try {
await logic.loginUser(email, password, lang);
setAuth(true);
setIsSubmitting(false);
pushLocation("/");
} catch (error) {
setMessageError(error.message);
setIsSubmitting(false);
setTimeout(() => {
setMessageError("");
}, 3000);
}
}
setErrorsValidateForm(errorsForm);
}
return () => {
isCancelled = true;
};
}
const handleOnChangeData = (e) => {
e.preventDefault();
setData({
...data,
[e.target.name]: e.target.value,
});
};
return (
<>
{messageError && (
<div className="message">
<p className="messageError">{messageError}</p>
</div>
)}
<section className="hero is-fullwidth">
<div className="hero-body">
<div className="container">
<div className="columns is-centered">
<div className="column is-4">
<form id="form" onSubmit={(e) => handleOnSubmit(e)} noValidate>
<div className="field">
<p className="control has-icons-left">
<input
className="input"
name="email"
type="email"
placeholder="Email"
onChange={handleOnChangeData}
required
/>
<span className="icon is-small is-left">
<i className="fas fa-envelope"></i>
</span>
</p>
{errorsValidateForm.email && (
<p className="help is-danger">
{errorsValidateForm.email}
</p>
)}
</div>
<div className="field">
<p className="control has-icons-left">
<input
className="input"
name="password"
type="password"
placeholder="Password"
onChange={handleOnChangeData}
required
/>
<span className="icon is-small is-left">
<i className="fas fa-lock"></i>
</span>
</p>
{errorsValidateForm.password && (
<p className="help is-danger">
{errorsValidateForm.password}
</p>
)}
</div>
<div className="field">
<p className="control">
<button type="submit" className="button is-success">
Login
</button>
</p>
</div>
<div>
<a href="/register">{login_notRegister[lang]}</a>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
</>
);
}