React: shouldComponentUpdate warte auf eine asynchrone Operation

Question

Ich versuche, ein Bestätigungsmodal (mit react-confirm) anzuzeigen, um den Benutzer zu warnen, wenn er versucht, zu einem anderen Abschnitt zu wechseln, damit die im Formular ausgefüllten Informationen verloren gehen.

die Bestätigung js funktioniert der Code blockieren, so kann ich dies tun:

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

Aber wenn ich die Bestätigungsverfahren durch die eine der Bibliothek reagieren-confirm ersetzen kann ich nicht auf das Ergebnis warten von diese asynchrone Operation.

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

}

Wer weiß, wie kann ich diese bekommen?

Answer 1

I beendete die Struktur der App zu ändern auf. Ich verwalte jeden Abschnitt mit einer anderen Route. Also implementiere ich die Bestätigung im Routing statt in der Komponente.

Answer 2

Sie sollten einen anderen Weg für dieses Problem verwenden. Nachdem Sie auf eine Schaltfläche oder andere Aktionen geklickt haben, wird ein Modal-/Bestätigungsfenster angezeigt. und fügen Sie dann Eventhandler für dieses Fenster wie:

_onClose(shouldUpdate) { 
    if(shouldUpdate) { 
    this.setState({}); // or this.forceUpdate() 
    } 
}