Aquí está mi App.js que contiene junto a Header y MainView un AlertDialog. El cuadro de diálogo de alerta tiene dos accesorios controlados por estado:
msg={alertMsg} toggleClass={alertToggleClass}La tarea de AlertDialog es mostrar si className es "alertDlg" y desaparecer si es "alertDlg alertDlgClosed". Probarlo a través del inspector manualmente (cambiando className) muestra que funciona bien.
Por lo tanto, alertToggleClass se establece en "alertDlg alertDlgClosed" al inicializar, de modo que el cuadro de diálogo de alerta se oculta de forma predeterminada.
Dentro del componente MainView (antes de render()) se sendGlobalAlert("Test Alert Msg") , que es simplemente una devolución de llamada al método showAlert(msg) en App.js.
Ahora aquí va la parte difícil: llamar a setAlertToggleClass("alertDlg"); en showAlert(msg) -method muestra el cuadro de diálogo de alerta personalizado como se esperaba. Sin embargo, intentar desactivarlo llamando a setAlertToggleClass("alertDlg alertDlgClosed"); dentro de setTimeout crea un bucle infinito para showAlert(msg) -método.
Por lo que puedo ver, no hay recursividad en setTimeout(...) .
No puedo explicar este comportamiento y agradecería cualquier sugerencia útil.
import './App.css'; import AlertDialog from './components/general/alert-dialog/AlertDialog'; import { Header } from './components/general/Header'; import MainView from './components/main/MainView'; import { useState } from "react"; function App() { const [alertMsg,setAlertMsg] = useState(""); const [alertToggleClass,setAlertToggleClass] = useState("alertDlg alertDlgClosed"); function showAlert(msg){ console.log("Showing alert dialog"); setAlertMsg(msg); // set message setAlertToggleClass("alertDlg"); // show alert dialog setTimeout(function() { if(alertToggleClass === "alertDlg" ){ setAlertToggleClass("alertDlg alertDlgClosed"); console.log("hide alert"); } // setAlertToggleClass("alertDlg test"); },3500); } return ( <div className="container"> <Header/> <MainView sendGlobalAlert={showAlert}/> <AlertDialog msg={alertMsg} toggleClass={alertToggleClass} /> </div> ); } export default App;sendGlobalAlert("Test Alert Msg"); dentro de MainView fue el problema aquí.
Después de esta llamada, que es básicamente una devolución de llamada al método showAlert(msg) de App.js, se cambiaron los accesorios almacenados en el estado, que usa AlertDialog. Debido a una actualización de estos accesorios, AlertDialog se volvió a renderizar y eso nuevamente provocó que se volviera a renderizar en App.js, lo que significa que los elementos también tenían que volver a renderizarse. Como incluía MainView, la representación de App.js significaba una representación de MainView, que llama a sendGlobalAlert("Test Alert Msg"); y comenzó la recursividad.
Así es como se ve MainView:
const MainView = ({sendGlobalAlert}) => { sendGlobalAlert("Test Alert Msg"); return ( <div className="main-view" > <BillView/> <InteractionView sendGlobalAlert={sendGlobalAlert}/> </div> ) }