sucede - reactjs update state

No se llama a componentWillUnmount() al actualizar la página actual

Question

He estado teniendo este problema donde mi código en el método componentDidMount() no se activaba correctamente al actualizar la página actual (y, posteriormente, el componente). Sin embargo, funciona perfectamente bien simplemente navegando y enrutando a través de mi sitio web haciendo clic en los enlaces. Actualizar la página actual? De ninguna manera.

Descubrí que el problema es que componentWillUnmount() no se activa cuando actualizo la página y se activan los enlaces que hacen clic y navega por mi sitio web / aplicación.

La activación de componentWillUnmount() es crucial para mi aplicación, ya que los datos que cargo y proceso en el método componentDidMount() son muy importantes para mostrar información a los usuarios.

Necesito que se llame a componentWillUnmount() al actualizar la página porque en mi función componentWillMount() (que debe volver a renderizarse después de cada actualización) hago un filtro simple y almaceno esa variable en un valor de estado, que debe estar presente en la variable de estado de logos para que funcione el resto del componente. Esto no cambia ni recibe nuevos valores en ningún momento durante el ciclo de vida del componente.

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

Acantilados

• Hago el filtrado de base de datos en el método componentWillMount()
• Se necesita estar presente en el componente después de la actualización.
• Pero tengo un problema donde el componentWillUnmount() no se dispara cuando la página se actualiza
• Necesitas ayuda
• Por favor

Answer 1

Cuando la página se actualiza, no tiene la posibilidad de desmontar los componentes normalmente. Use el evento window.onbeforeunload para configurar un controlador para actualizar (lea los comentarios en el código):

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

También me encontré con este problema y me di cuenta de que necesitaba asegurarme de que al menos 2 componentes siempre se desmontaran con gracia. Así que finalmente hice un componente de orden alto que garantiza que el componente envuelto siempre se desmonte

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

}

Nota : Si, como yo, está usando enlaces de turbol y rieles, es posible que desee enganchar tanto los beforeunload turbolinks:before-render como los de turbolinks:before-render eventos de turbolinks:before-render .

Answer 3

Veo que esta pregunta tiene más de mil visitas, por lo que explicaré cómo resolví este problema:

Para resolver este problema en particular, la manera más sensata es crear un componente de nivel superior que cargue su suscripción o base de datos, de modo que cargue los datos necesarios antes de pasarlos a su componente secundario, lo que eliminaría completamente la necesidad de usar componentWillMount() . Además, puede realizar los cálculos en el componente de nivel superior y simplemente transmitirlos como accesorios para usar en su componente de recepción.

Por ejemplo:

class UpperLevelComponent extends React.Component {

render() {
if(this.props.isReady) {
return(<ChildComponent {...props}/>)
}
}
}

export default createContainer(() => {
const data = Meteor.subscribe("myData");
const isReady = data.ready();

return {
isReady,
data: MyData.find.fetch()
}
})

En el ejemplo anterior, uso el contenedor reactivo de Meteor para obtener mis datos de MongoDB y espero a que termine de suscribirse por completo antes de procesar el componente hijo, pasándole los accesorios que desee. Si carga todos sus datos en el componente de nivel superior, no tendrá que confiar en el método componentWillMount() para activarse después de cada actualización. Los datos estarán listos en el componente de nivel superior, por lo que puede usarlos como desee en el componente secundario.