Reactjs 我收到错误消息警告：Can'；t在未安装的组件上执行React状态更新

我收到了错误信息

警告：无法对未安装的组件执行React状态更新。这是一个no-op，但它表示应用程序中存在内存泄漏。要修复此问题，请取消componentWillUnmount方法中的所有订阅和异步任务。登录名（由Context.Consumer创建）`

我很抱歉，我尝试了解决这个问题的最常用的方法，但没有成功。使用_isMounted的修复=false；componentDidMount（）{this.\u isMounted=true；}如果（this.\u isMounted）{this.setState（{data:data}）；}

我也在使用上下文

SessionContex.js

import React, { Component, createContext } from "react";

export const SessionContext = createContext();

class SessionContextProvider extends Component {
  _isMounted = false;
  state = {
    is_logged_in: false,
    personid: " ",
    firstname: " ",
    lastname: " "
  };
  loggedIn = (loginvalue, personid, firstname, lastname) => {
    this.setState({
      is_logged_in: loginvalue,
      personid: personid,
      firstname: firstname,
      lastname: lastname
    });
  };

  loggedOut = () => {
    this.setState({
      is_logged_in: false,
      personid: " ",
      firstname: " ",
      lastname: " "
    });
  };
  componentDidMount = () => {
    this._isMounted = true;
    const login = localStorage.getItem("is_logged");
    const id = localStorage.getItem("personid");
    const firstname = localStorage.getItem("firtname");
    const lastname = localStorage.getItem("lastname");
    console.log(login);
    if (this._isMounted) {
      this.setState({
        is_logged_in: login,
        personid: id,
        firstname: firstname,
        lastname: lastname
      });
    }
  };

  componentWillUnmount() {
    this._isMounted = false;
  }
  render() {
    return (
      <SessionContext.Provider
        value={{
          ...this.state,
          loggedIn: this.loggedIn,
          loggedOut: this.loggedOut
        }}
      >
        {this.props.children}
      </SessionContext.Provider>
    );
  }
}

export default SessionContextProvider;

import React，{Component，createContext}来自“React”；
export const SessionContext=createContext（）；
类SessionContextProvider扩展组件{
_isMounted=错误；
状态={
是否已登录：false，
人形：“，
名字：“，
姓氏：“
};
loggedIn=（loginvalue、personid、firstname、lastname）=>{
这是我的国家({
是否已登录：登录值，
personid:personid，
名字：名字，
姓氏：姓氏
});
};
loggedOut=（）=>{
这是我的国家({
是否已登录：false，
人形：“，
名字：“，
姓氏：“
});
};
componentDidMount=（）=>{
这个。_isMounted=true；
const login=localStorage.getItem（“是否已记录”）；
const id=localStorage.getItem（“personid”）；
const firstname=localStorage.getItem（“firtname”）；
const lastname=localStorage.getItem（“lastname”）；
console.log（登录）；
如果（此项已安装）{
这是我的国家({
是否登录：登录，
人物id:id，
名字：名字，
姓氏：姓氏
});
}
};
组件将卸载（）{
这个。_isMounted=false；
}
render（）{
返回(
{this.props.children}
);
}
}
导出默认SessionContextProvider；

Login.jsx

import React, { Component } from "react";
import { SessionContext } from "../context/SessionContext";
import "../Stylesheets/Login.css";
import "..//Stylesheets/global.css";
import { Redirect } from "react-router-dom";

class Login extends Component {
  _isMounted = false;
  static contextType = SessionContext;

  state = {
    password: " ",
    email: " ",
    couldNotfindLogin: true,
    redirect: false
  };

  handleChange = e => {
    this.setState({
      [e.target.name]: e.target.value,
      [e.target.name]: e.target.value
    });
  };

  handleSubmit = async e => {
    e.preventDefault();
    const data = this.state;
    console.log(data);
    const response = await fetch("http://localhost:3080/users/login", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      body: JSON.stringify(data)
    });

    const reply = await response;

    if (reply.status === 200) {
      const userData = await response.json();
      this.context.loggedIn(
        userData.isValid,
        userData.personid,
        userData.firstname,
        userData.lastname
      );
      localStorage.setItem("is_logged", userData.isValid);
      localStorage.setItem("personid", userData.personid);
      localStorage.setItem("firstname", userData.firstname);
      localStorage.setItem("lastname", userData.lastname);

      this.setState({
        couldNotfindLogin: true,
        redirect: true
      });
    }

    if (reply.status !== 200) {
      this.context.loggedIn(false);
      console.log(this.context);
    }
    this.setState({
      couldNotfindLogin: false
    });
  };
  componentWillUnmount() {
    this.mounted = false;
  }

  render() {
    let { couldNotfindLogin } = this.state;
    if (this.state.redirect === true) {
      return <Redirect to="/" />;
    }

    return (
      <>
        <section className="container">
          <div className="row">
            <div className="col-sm-12 col-md-12 col-lg-12 login-section">
              <div className="form login-box">
                <form className="form-login Login" onSubmit={this.handleSubmit}>
                  <label htmlFor="Email">
                    <p className="login-header">
                      Login to see your past, present, and future self.
                    </p>
                    <input
                      className="login-input"
                      id="Email"
                      type="text"
                      name="email"
                      onChange={this.handleChange}
                      placeholder="Email Address"
                      required
                    />
                    {!couldNotfindLogin ? (
                      <p className="FindYou">We could not find your account </p>
                    ) : (
                      " "
                    )}
                  </label>
                  <label htmlFor="Password">
                    <input
                      className="login-input"
                      id="Password"
                      type="password"
                      name="password"
                      onChange={this.handleChange}
                      placeholder="Password"
                      required
                    />
                  </label>
                  <button className="login-button" type="submit">
                    Login
                  </button>
                </form>
              </div>
            </div>
          </div>
        </section>
      </>
    );
  }
}

import React，{Component}来自“React”；
从“./context/SessionContext”导入{SessionContext}；
导入“./Stylesheets/Login.css”；
导入“.//Stylesheets/global.css”；
从“react router dom”导入{Redirect}；
类登录扩展组件{
_isMounted=错误；
静态上下文类型=会话上下文；
状态={
密码：“”，
电邮：“，
真的，
重定向：false
};
handleChange=e=>{
这是我的国家({
[e.target.name]：e.target.value，
[e.target.name]：e.target.value
});
};
handleSubmit=async e=>{
e、 预防默认值（）；
const data=this.state；
控制台日志（数据）；
const response=等待获取（“http://localhost:3080/users/login", {
方法：“张贴”，
标题：{
接受：“应用程序/json”，
“内容类型”：“应用程序/json”
},
正文：JSON.stringify（数据）
});
const reply=等待响应；
如果（reply.status==200）{
const userData=wait response.json（）；
this.context.loggedIn(
userData.isValid，
userData.personid，
userData.firstname，
userData.lastname
);
setItem（“已记录”，userData.isValid）；
setItem（“personid”，userData.personid）；
setItem（“firstname”，userData.firstname）；
setItem（“lastname”，userData.lastname）；
这是我的国家({
真的，
重定向：true
});
}
如果（reply.status！==200）{
this.context.loggedIn（false）；
log（this.context）；
}
这是我的国家({
couldNotfindLogin:false
});
};
组件将卸载（）{
这是错误的；
}
render（）{
设{couldNotfindLogin}=this.state；
if（this.state.redirect==true）{
返回；
}
返回(

登录查看您的过去、现在和未来自我。

{！找不到登录(
我们找不到您的帐户

) : (
" "
)}
登录
);
}
}

我发现了一些阻碍您前进的错误。我会尽量简短地回答，不要把这当作一个冗长的回答：

• 允许

  提供程序

  处理与高级

  状态

  和

  本地存储

  相关的所有事情。仅使用与组件相关的本地状态。另外，由于

  setState（）

  是异步的，因此避免在另一个异步函数之后立即设置它。虽然您确实有一个

  \isMounted

  类属性，但在异步函数（fetch请求）解析时不会对其进行检查，因此，如果您在React尝试更新组件状态时将用户重定向到另一个路由，那么您将收到上述警告。简单地说，在使用setState之前，使用async函数中的

  \u isMounted

  ，或者干脆避免使用setState（参见下面的示例）

• handleChange

  类字段只需要一个

  [e.target.name]：e.target.value

  语句。有两个是不必要的。您可以使用将其简化为：

  [name]：value

  （参见下面的示例）
• 提供给

  路线的任何
  组件
  都可以访问一些。在这些道具中有一个
  history
  对象，它包含几个方法——其中有一个
  push
  方法。您可以使用此
  push
  方法重定向使用