componentWillUnmount & Warning: setState(...): error

Question

I'm having an issue when I use a navigate away from this component in react I get this error: warning.js:36 Warning: setState(...): "Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the ProjectsHeader component."

Now I've looked over the docs for componentWillUnmount which states "Invoked immediately before a component is unmounted from the DOM.

Perform any necessary cleanup in this method, such as invalidating timers or cleaning up any DOM elements that were created in componentDidMount."

The problem is that I don't know how to do that. I've looked at the other Stack overflow examples and I don't understand them and can't figure it out. There doesn't seem to be a good enough example for me to understand how to do it. I understand the lifecycle I just don't know how to execute it.

Here is my code:

import React from 'react';
import jQuery from 'jquery';
import $ from 'jquery';

import ProjectsHeaderLinks from "./ProjectsHeaderLinks.jsx";

export default class ProjectsHeader extends React.Component {

    constructor() {
        super()
        this.state = {
            class: "not-sticky-div",
            class2: "hidden-span",
            class3: "false"
        }
    }



    componentDidMount() {
        this.scrollTop();

    }

    componentWillUnmount(){
        this.scrollTop = null;
        console.log("unmounted");
    }


    scrollTop(){
        var that = this;
        let head = $(".header");
        let stick = "sticky";
        let projHead = document.getElementById("projHead");
    $(window).scroll(function() {
        $(window).scrollTop() > 400
            ? head.addClass(stick)
            : head.removeClass(stick);
        let newValue = projHead.classList.value.split(' ', 2);
        for (var i = 0; i < newValue.length; i++) {
            newValue[i] === "sticky"
                ? that.setState({class: "sticky-div", class2: "visible-span", class3: "true"})
                : that.setState({class: "not-sticky-div", class2: "hidden-span", class3: "true"});
            }
        })
    }



    render() {
        return (
            <div id="projHead" className="header">
                <div className={this.state.class}>
                {this.state.class === "not-sticky-div"
                 ? <div>"This is My Projects Page" --Lonnie McGill</div>
                 : <div> <ProjectsHeaderLinks/> </div>
            }
                </div>
            </div>
        )
    }
}

You need to unbind the `$(window).scroll` handlers when a component is unmounted. — zerkms, Oct 19 '16 at 23:33
http://stackoverflow.com/q/4154952/251311 - this is a google's first result for the "jquery unbind scroll" request — zerkms, Oct 19 '16 at 23:45
Thank you. I thought I had to invoke some sort of es6 function. I didn't know that you could simply put: componentWillUnmount(){ $(window).unbind("scroll"); } and that would unmount it. — Devsterefic, Oct 19 '16 at 23:50

score 1 · Answer 1 · answered Oct 19 '16 at 23:52

1

To solve the issue put:

componentWillUnmount(){ 
    $(window).unbind("scroll");
}

answered Oct 19 '16 at 23:52

Devsterefic

505
1
8
23

componentWillUnmount & Warning: setState(...): error

1 Answers1