reactjs - React 错误“无法在未安装的组件上执行 React 状态更新。这是一个无操作，但它表示内存泄漏”

Question

我有一个 Login 组件，但我收到该错误：Can't perform a React state update on an unmounted component。这是一个空操作，但它表示内存泄漏。我用谷歌搜索了这个错误，发现有些人有同样的问题，我试图像他们一样解决它，但它对我不起作用。为什么我有这个错误，我该如何解决？谢谢

组件登录

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>
    </>
  );
}

标签： reactjsreact-hooks