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

Question

我在控制台中收到此错误/警告：

setState（...）：只能更新已安装或正在安装的组件。

编辑安装组件

这是我安装组件的位置：

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

        this.bindEventListeners();
    }

这是导致问题的代码：

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.setState（{scrollEv：scrollEvnt}）;

如果我正确理解它，则意味着我需要一种卸载滚动事件的方法。 但是我不确定这是否可能。 我很确定您无法取消（香草）javascript / React中的滚动事件。

编辑2 isVisible函数

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

我可能是错的，但是我不确定如何解决此警告/错误。 也许有人可以帮助我？ 任何帮助表示赞赏:)

提前谢谢了！

Answer 1

我认为我们可能需要查看更多代码才能解决这一问题。

几个问题：

• 您确定没有从其他地方调用bindEventListeners（）吗？
• 为什么拥有this.isVisible（）时为什么需要“ this.state.visible”？

该图对跟踪对象的生命周期中发生的所有事情有很大帮助

Answer 2

您需要在componentWillUnmount删除滚动事件侦听器

符合以下要求的方法应该起作用：

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
}