Estoy tratando de crear una función cuando el usuario presiona el botón Atrás del navegador, ejecutará la función deleteHeldResort que creé.
Aquí está mi código para deleteHeldResort:
deleteHeldResorts(ReservedInventoryID: number | null = null, refreshHeldResorts: boolean = true) { return new Promise((resolve, reject) => { this.setState({heldResortsShowLoader: true}); this.reservationService.deleteHeldResorts(ReservedInventoryID) .then(() => { refreshHeldResorts && this.getHeldResorts(); resolve(); }) .catch((error: any) => { this.catchHeldResortsError(error); reject(error); }); this.setState({ heldResortsShowLoader: false }); }); }Base de código actualizada:
handleNavigateBack = useCallback( (event) => { // call your function here with whatever argument your code provides this.reservationService.deleteHeldResorts(this.props.resId); } , []); useEffect(() => { document.addEventListener('popstate', this.handleNavigateBack ); return () => { document.removeEventListener('popstate', this.handleNavigateBack) } }, [this.handleNavigateBack]);Respuesta actualizada: componente de clase basado
Dado que está utilizando componentes de clase, estoy agregando esta actualización. Dentro del componente de clase que tiene la función deleteHeldResorts , puede escuchar el evento popstate : Observe cómo la palabra clave bind nos ayuda a mantener this valor correcto.
import React from "react"; import { render } from "react-dom"; class App extends React.Component { constructor(props) { super(props); this.handleNavigateBack = this.handleNavigateBack.bind(this); } componentDidMount() { document.addEventListener("popstate", this.handleNavigateBack); } componentWillUnmount() { document.removeEventListener("popstate", this.handleNavigateBack); } handleNavigateBack(event) { console.log("inside callback", event); // change arguments as you want this.deleteHeldResorts(null, false); } deleteHeldResorts(ReservedInventoryID = null, refreshHeldResorts = true) { // your function goes down there content console.log("inside deleteHeldResorts"); } render() { return <h2>popstate browser listener</h2>; } } render(<App />, document.getElementById("root"));Respuesta inicial: función basada en componentes
Dentro del componente que tiene la función deleteHeldResorts , puede escuchar el evento popstate :
// your-component.js function YourComponent() { function deleteHeldResorts(ReservedInventoryID: number | null = null, refreshHeldResorts: boolean = true) { // your function content } const handleNavigateBack = useCallback( (event) => { // call your function here with whatever argument your code provides deleteHeldResorts(reservedInventoryID,refreshHeldResorts); } // depending on your logic, add deps to this array dependency }, []) useEffect(() => { document.addEventListener('popstate', handleNavigateBack ); return () => { document.removeEventListener('popstate', handleNavigateBack) } }, [handleNavigateBack]) return ( <>something dope</>); }