javascript - 事件处理程序未从 redux 状态访问正确的值

Question

在我的 Web 应用程序中，我想在用户尝试使用事件处理程序根据 Redux 状态关闭浏览器/选项卡时提示用户。

我使用下面的代码根据“isLeaving”状态在退出之前提示用户。

function mapStateToProps(state) {
    const {isLeaving} = state.app.getIn(['abc']);
    return {
        isLeaving
    };
}

@connect(mapStateToProps, {}, undefined, {withRef: true})
export default class MyClass extends React.component {
    @autobind
    stayOnPage(event) {
        if (this.props.isLeaving) {
            const message = 'Are you sure you want to leave';
            event.returnValue = message;
            return message;
        }
        return false;
    }

    componentDidMount() {
        window.addEventListener('beforeunload', (event) => {
            this.stayOnPage(event);
        });
    }

    componentWillUnmount() {
        window.removeEventListener('beforeunload', (event) => {
            this.stayOnPage(event);
        });
    }



    componentWillReceiveProps(nextProps) {
        if (this.props.prop1 !== nextProps.prop2) {
           // do something
        }
    }

    render() {
       //
    }
}

这段代码工作正常。但是每当 prop1 发生变化时，我都会看到 this.props.isLeaving 没有更新的值。

有人可以帮忙吗？我在这里做错了什么？

Answer 1

您没有在 componentWillUnmount 中正确清理。您尝试删除的事件处理程序是一个全新的函数闭包，而不是您添加的同一实例。您应该只附加实际的处理程序，而不是使用箭头函数，如下所示:

componentDidMount() {
    window.addEventListener('beforeunload', this.stayOnPage);
}

componentWillUnmount() {
    window.removeEventListener('beforeunload', this.stayOnPage);
}

您所看到的可能是在陈旧组件实例上触发的事件，因此它具有旧状态。