Tengo un problema extraño. Comencemos con mi pila, estamos usando React + NextJS + Tailwind css . Hice un componente de brindis usando el contexto de reacción , dentro de mi contexto tengo métodos que administran mis brindis. Ahora echemos un vistazo a mi código (no puedo mostrar todo mi código, pero aquí hay una parte con la que tengo problemas) Archivo de contexto:

 export const ToastContextProvider:FC<ToastProps> = ({ children }) => { const [toasts, setToasts] = useState<ToastComponentProps[]>([]); const generateId = () => Math.random().toString(36).substring(2, 9); const removeToast = (_id: string): void => { setToasts(toasts.filter(({ id }) => id !== _id)); }; const showToast = (toast: ToastComponentProps) => { const toastWithId = { ...toast, id: generateId() }; setToasts((oldToasts) => [...oldToasts, toastWithId]); if (toast.timeout !== 0) { setTimeout(() => removeToast(toastWithId.id), toast.timeout ?? 3000); } };

Como puede ver, cada objeto del brindis tiene un nombre de propiedad timeout, cuando timeout = 0 no tenemos que eliminarlo automáticamente por código, y el usuario debe cerrar el brindis por sí mismo.

El problema principal:

Llamo a un brindis con tiempo de espera y sin, y se eliminan al azar. He intentado un montón de cosas, pero todavía estoy atascado.