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

在我的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没有更新的值

---

有人能帮忙吗？我做错了什么？

React使用合成事件，基本上事件被循环使用以提高性能。你可以阅读更多关于这方面的内容

我通常做的是在调用时传递所需的值

---

不确定这在您的特定情况下是否会起作用，因为我在JSX中定义了我的事件处理程序，而不是访问您可能也想访问的窗口对象，但老实说，我不确定，但我一直使用此模式来正确处理e.target.value

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

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

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

---

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

isLeaving属性是从redux状态传入的，但此组件中没有任何内容可更新redux中的状态，因此isLeaving保留其初始传入值。isLeaving属性是从其他代码段中更新的。所以，当状态在redux中更新时，这个组件不应该也被重新命名并具有最新的值吗。问题是我只想检查最新的值。有办法吗？我希望始终检查isLeaving的最新值。感谢合成事件链接。你能再解释一下吗？基本上React只有一个合成事件对象。每次调用SyntheticEvent时，并非所有事件都以此为目标，SyntheticEvent对象将填充有关该事件的数据。重点是，您不能指望SyntheticEvent对象包含您期望它包含的数据。这解决了我的用例问题，在调试时，我发现该事件是在过时的组件实例上触发的