React Js错误无法在已卸载的组件上执行React状态更新

Question

我正在处理登录注销组件，并且一切正常，但是有时会弹出此错误无法对已卸载的组件执行React状态更新。这是空操作，但它表明应用程序中发生内存泄漏。要修复，取消componentWillUnmount方法中的所有订阅和异步任务，我已经在互联网上进行搜索并尝试了许多解决方案，但没有任何帮助

这是我的登录组件

       wrapper.addEventListener("mouseout", function(event) {      
        var e = event.toElement || event.relatedTarget;
          if(e == circle) {
            return;
          }
          gsap.to(circle, 0.4, { scale: 0.1, autoAlpha: 0 });
        });

这是我的注销组件

class Login extends Component {

_isMounted = false;

constructor(props) {
    super(props)
    let token = localStorage.getItem("Token")
    let isloggedIn = true
    if (token == null) {
        isloggedIn = false
    }
    let authToken = undefined
    this.state = {
        userName: undefined,
        userPassword: undefined,
        isToken: false,
        isloggedIn,
        authToken
    }
}

componentDidMount(){
    this._isMounted = true;
}
componentWillUnmount() {
    this._isMounted = false;
}




SetUserName = (event) => {
    this.setState({ userName: event.target.value })

}

SetUserPassword = (event) => {
    this.setState({ userPassword: event.target.value })
}

SubmitHandler = (e) => {
    e.preventDefault();
    this._isMounted = true;

    console.log("button clicked")

    var reqData = {
        "username": this.state.userName,
        "password": this.state.userPassword,
        "grant_type": "password"
    };

    axios({
        method: 'post',
        url: 'http://192.168.100.35/token',
        withCredentials: true,
        crossdomain: true,
        data: $.param(reqData),
        headers: {
            "Content-Type": "application/x-www-form-urlencoded",
            "Cache-Control": "no-cache",

        }
    }).then(response => {
        if (this._isMounted) {
            console.log(response.data)
            this.setState({ isToken: true })
            this.setState({ isloggedIn: true })
            this.setState({ authToken: response.data.access_token })
            localStorage.setItem("Token", this.state.authToken)

        }





    })
}

render() {

    if (this.state.isloggedIn) {
        return <Redirect to="/getStudentsByClass" />
    }

    return (
        <div className="Login">
            <div className="c-card u-mb-xsmall">
                <header className="c-card__header u-pt-large">
                    <a>

                    </a>
                    <h1 className="u-h3 u-text-center u-mb-zero">Welcome Back! Please Login.</h1>

                </header>
                <form className="c-card__body">
                    <div className="c-field u-mb-small">
                        <label className="c-field__label">
                            Log in with your e-mail address
                        </label>
                        <input className="c-input" value={this.state.userName} onChange={this.SetUserName} type="text" placeholder="clark@dashboard.com"></input>

                    </div>
                    <div className="c-field u-mb-small">
                        <label className="c-field__label">
                            Password
                        </label>
                        <input className="c-input" value={this.state.userPassword} onChange={this.SetUserPassword} type="password" placeholder="Letters, Numbers"></input>

                    </div>
                    <button className="c-btn c-btn--info c-btn--fullwidth"
                        onClick={this.SubmitHandler}>
                        Sign in to Dashboard
                    </button>
                    <span className="c-divider c-divider--small has-text u-mv-medium">
                        Login Via Social Networks

                    </span>
                    <div className="o-line">
                        <a className="c-icon u-bg-twitter">
                            <i className="fa fa-twitter"></i>
                        </a>
                        <a className="c-icon u-bg-facebook">
                            <i className="fa fa-facebook"></i>
                        </a>
                        <a className="c-icon u-bg-pinterest">
                            <i className="fa fa-pinterest"></i>
                        </a>
                        <a className="c-icon u-bg-dribbble">
                            <i className="fa fa-dribbble"></i>
                        </a>

                    </div>

                </form>

            </div>
            <div className="o-line">
                <a className="u-text-mute u-text-small">
                    Don’t have an account yet? Get Started

                </a>
                <a className="u-text-mute u-text-small">
                    Forgot Password?

                </a>

            </div>

        </div>
    )
}
}

这是我的GetStudentsByClass组件

class Logout extends Component{
constructor(props){
    super(props)
    localStorage.removeItem("Token")
}
render(){
    return(
        <div>
            <h2>You Have Been Logged Out</h2>
            <Link to="/">Login</Link>
        </div>
    )
}
}

}

Answer 1

您可以通过在卸载组件时中止请求或阻止未安装的组件上的this.setState（）来处理此问题。

您可以在ComponentDidMount（）中调用SubmitHandler（）方法并删除

this._isMounted = true;

内部SubmitHandler（e）方法中。 例如。

componentDidMount(){
    this._isMounted = true;
    this.onClickSubmitHandler();
}

onClickSubmitHandler() {
 SubmitHandler = (e) => {
    e.preventDefault();
    console.log("button clicked")

    var reqData = {
        "username": this.state.userName,
        "password": this.state.userPassword,
        "grant_type": "password"
    };

    axios({
        method: 'post',
        url: 'http://192.168.100.35/token',
        withCredentials: true,
        crossdomain: true,
        data: $.param(reqData),
        headers: {
            "Content-Type": "application/x-www-form-urlencoded",
            "Cache-Control": "no-cache",

        }
    }).then(response => {
        if (this._isMounted) {
            console.log(response.data)
            this.setState({ isToken: true })
            this.setState({ isloggedIn: true })
            this.setState({ authToken: response.data.access_token })
            localStorage.setItem("Token", this.state.authToken)

        }

    })
}
}