反应警告setState（…）：只能更新已安装或正在安装的组件

Question

I get this Error/Warning in my console:

setState(...): Can only update a mounted or mounting component.

EDIT Mounting the component

Here's where I mount the component:

componentDidMount()
    {
        if (this.isVisible()) {
            this.setState({visible: true});
        }

        this.bindEventListeners();
    }

This is the code that is causing the issue:

bindEventListeners()
    {
        let visibilityEvent = function (event) {
            event.currentTarget.removeEventListener(event.type, visibilityEvent);
            // protect the component against unloading
            if (this.isVisible()) {
                this.setState({visible: true});
            }

            // no need to call the timeout when its already visible
            if (!this.state.visible) {
                let scrollEvnt = setTimeout(function () {
                    EventContainer.readWindowEvent('scroll', visibilityEvent);
                }, 100);

                this.setState({scrollEv: scrollEvnt});
            }

        }.bind(this);

        EventContainer.readWindowEvent('scroll', visibilityEvent);
    }

This line to be more precise:

this.setState({scrollEv: scrollEvnt});

If I understand it correctly it means that I need a way to unmount the scroll event. But I am not sure if this is even possible. I am pretty sure you can't unbind a scroll event in (vanilla)javascript/React.

Edit 2 isVisible function

isVisible()
    {
        let isVisible = true;

        try {
            let heightElement = ReactDOM.findDOMNode(this).getBoundingClientRect().top;

            isVisible = heightElement - window.innerHeight < 0;
        } catch (error) {
            console.warn('Falling back');
        }

        return isVisible;
    }

I might be wrong but I am not sure how to resolve this warning/error. Maybe someone can help me out? Any help is appreciated :)

Many thanks in advance!

Answer 1

I think we might need to see more of the code to figure this one out.

A couple of questions:

• Are you sure you're not calling bindEventListeners() from somewhere else?
• Why do you need "this.state.visible" when you have this.isVisible()?

This diagram has helped me a lot in keeping track of where everything happens in a react object's lifecycle

Answer 2

You need to remove the scroll event listener in componentWillUnmount

Something along the lines of the following should work:

constructor(props) {
    super(props);
    this.onScroll = this.onScroll.bind(this);
}

componentDidMount()
{
    window.addEventListener('scroll', this.onScroll);
}

componentWillUnmount()
{
    window.removeEventListener('scroll', this.onScroll);
}

onScroll(event)
{
    //handle event here
}