0

Estoy tratanto de mostrar un mensaje de confirmación para que le avise al usuario cuando intente cambiar de sección que los datos que completó serán descartados. Cuando uso el método confirm de js, como bloquea el código, puedo hacer esto:

shouldComponentUpdate(nextProps, nextState) {
            if (confirm('Hay cambios sin guardar, si continua se perderán. ¿Desea continuar?')) {
                return true;
            } else {
                return false;
            }
    }

Sin embargo, cuando reemplazo el método confirm de js por el de la librería react-confirm (que simplemente muestra un modal de bootstrap y retorna respuesta en el callback) no puedo conseguir retornar el valor al método shouldComponentUpdate y que este a su vez lo retorne.

async shouldComponentUpdate(nextProps, nextState) {
        const response = await confirm('Hay cambios sin guardar, si continua se perderán. ¿Desea continuar?', { title: "Cambios sin guardar", okLabbel: "Sí", cancelLabel: "No!" })
            .then(
                () => {
                    return true;
                },
                () => {
                    return false;
                }
            );
        return (response);
}

Alguna idea? Gracias

2
  • Creo que deberías manejar esto a nivel de router y no en el ciclo de vida del componente. Estas usando react-native o es una aplicación de react solamente?
    – devconcept
    Commented el 18 oct. 2016 a las 13:49
  • El tema es que esa parte que quiero controlar no esta manejada por url, sino que es un componente que va modificando información. Es react, trate de usar react-native para eso de await.
    – Marina
    Commented el 18 oct. 2016 a las 14:08

1 respuesta 1

1

El método shouldComponentUpdate no puede ser asíncrono debido a que debe se espera retorne true o false inmediatamente no una promesa, lo que deberías hacer es usar withRouter un componente de alto nivel incluido en reactRouter.

https://github.com/ReactTraining/react-router/blob/master/upgrade-guides/v2.4.0.md

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.