刷新当前页面时未调用componentWillUnmount()

Question

我一直遇到这个问题,componentDidMount()在刷新当前页面(以及随后的组件)时,我的方法中的代码没有正确触发.但是,它通过单击链接在我的网站上导航和路由完美地工作.刷新当前页面？不是机会.

我发现问题是componentWillUnmount()当我刷新页面并触发精细点击链接并浏览我的网站/应用程序时不会触发.

触发componentWillUnmount()对我的应用程序至关重要,因为我在componentDidMount()方法中加载和处理的数据对于向用户显示信息非常重要.

我需要componentWillUnmount()在刷新页面时调用,因为在我的componentWillMount()函数中(每次刷新后需要重新渲染)我做一些简单的过滤并将该变量存储在状态值中,该状态值需要logos按顺序存在于状态变量中使组件的其余部分工作.在组件的生命周期中,这不会随时更改或接收新值.

componentWillMount(){
  if(dataReady.get(true)){
    let logos = this.props.questions[0].data.logos.length > 0 ? this.props.questions[0].data.logos.filter((item) => {
      if(item.logo === true && item.location !== ""){
        return item;
      }
    }) : [];
    this.setState({logos: logos});
  }
};

悬崖:

• 我在componentWillMount()方法中进行数据库过滤
• 刷新后需要它出现在组件中
• 但我有一个问题,componentWillUnmount()当页面刷新时不会触发
• 需要帮忙
• 请

Answer 1

当页面刷新时,反应没有机会正常卸载组件.使用该window.onbeforeunload事件设置刷新处理程序(读取代码中的注释):

class Demo extends React.Component {
    constructor(props, context) {
        super(props, context);

        this.componentCleanup = this.componentCleanup.bind(this);
    }

    componentCleanup() { // this will hold the cleanup code
        // whatever you want to do when the component is unmounted or page refreshes
    }

    componentWillMount(){
      if(dataReady.get(true)){
        let logos = this.props.questions[0].data.logos.length > 0 ? this.props.questions[0].data.logos.filter((item) => {
          if(item.logo === true && item.location !== ""){
            return item;
          }
        }) : [];

        this.setState({ logos });
      }
    }

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

    componentWillUnmount() {
        this.componentCleanup();
        window.removeEventListener('beforeunload', this.componentCleanup); // remove the event handler for normal unmounting
    }

}

Answer 2

我也遇到了这个问题,并意识到我需要确保至少2个组件始终优雅地卸载.所以我最终做了一个高阶组件,确保包装组件始终卸载

import React, {Component} from 'react'

// this high order component will ensure that the Wrapped Component
// will always be unmounted, even if React does not have the time to
// call componentWillUnmount function
export default function withGracefulUnmount(WrappedComponent) {

    return class extends Component {

        constructor(props){
            super(props);
            this.state = { mounted: false };
            this.componentGracefulUnmount = this.componentGracefulUnmount.bind(this)
        }


        componentGracefulUnmount(){
            this.setState({mounted: false});

            window.removeEventListener('beforeunload', this.componentGracefulUnmount);
        }

        componentWillMount(){
            this.setState({mounted: true})
        }

        componentDidMount(){
            // make sure the componentWillUnmount of the wrapped instance is executed even if React
            // does not have the time to unmount properly. we achieve that by
            // * hooking on beforeunload for normal page browsing
            // * hooking on turbolinks:before-render for turbolinks page browsing
            window.addEventListener('beforeunload', this.componentGracefulUnmount);
        }

        componentWillUnmount(){
            this.componentGracefulUnmount()
        }

        render(){

            let { mounted }  = this.state;

            if (mounted) {
                return <WrappedComponent {...this.props} />
            } else {
                return null // force the unmount
            }
        }
    }

}

注意:如果像我一样,你使用的是turbolinks和rails,你可能想要同时关注beforeunload和turbolinks:before-render事件.