0
186
ViewsCómo crear dinámicamente múltiples alertas dentro de mui v5 Snackbar
Estoy llamando a una API para realizar algunas acciones.
Quiero tomar la respuesta de cada acción y mostrarla dentro de Snackbar/alert.
Solo puedo mostrar la primera respuesta y nada más, incluso después de iterar los mensajes en un mapa.
Aquí está mi lógica de negocios llamando a la API
try { const deletedUser = await deleteUser({ username: username }); [deletedUser.data.status.action1, deletedUser.data.status.action2].map( (msg) => setNotify({ isOpen: true, message: msg, type: "success", }) ); } catch (error) {}setNotify abrirá el Snackbar con las alertas
import React from "react"; import { Snackbar, Alert } from "@mui/material"; import { styled } from "@mui/material/styles"; const StyledSnackbar = styled((props) => <Snackbar {...props} />)( ({ theme }) => ({ "& .MuiSnackbar-root": { top: theme.spacing(15), }, }) ); export default function Notification(props) { const { notify, setNotify } = props; const handleClose = (event, reason) => { setNotify({ ...notify, isOpen: false, }); }; return ( <StyledSnackbar open={notify.isOpen} autoHideDuration={10000} anchorOrigin={{ vertical: "top", horizontal: "right" }} onClose={handleClose} > <Alert severity={notify.type} onClose={handleClose}> {notify.message} </Alert> </StyledSnackbar> ); }El único problema es que solo muestra la primera acción y nada más.
Sospecho que las alertas se superponen entre sí Tal vez necesitamos agregar algún tipo de accesorio de AutoGrow
1 answers
Answer question0
Tienes que usar notistack como se describe en el documento MUI :
Este ejemplo demuestra cómo usar notistack . notistack tiene una API imperativa que facilita la visualización de snackbars, sin tener que manejar su estado abierto/cerrado. También le permite apilarlos uno encima del otro (aunque las pautas de Material Design no lo recomiendan).
Comience por envolver su aplicación dentro de un componente SnackbarProvider y luego use el gancho useSnackbar para acceder a enqueueSnackbar para agregar una barra de bocadillos a la cola que se mostrará:
Aplicación.js
import "./styles.css"; import React from "react"; import { SnackbarProvider } from "notistack"; import Notification from "./Notification"; export default function App() { return ( <SnackbarProvider maxSnack={3}> <div className="App"> <h1>Dynamic Snackbar Alerts</h1> <Notification /> </div> </SnackbarProvider> ); }Notificación.js
import React from "react"; import { Button } from "@mui/material"; import { useSnackbar } from "notistack"; export default function Notification(props) { const { enqueueSnackbar } = useSnackbar(); const handleClick = async () => { try { const deletedUser = await deleteUser({ username: username }); [deletedUser.data.status.action1, deletedUser.data.status.action2].forEach((msg) => { enqueueSnackbar(msg, { variant: "success", autoHideDuration: 10000, anchorOrigin: { vertical: "top", horizontal: "right" } }); }); } catch (error) {} }; return ( <Button variant="outlined" onClick={handleClick}> Generate Snackbar Dynamicly </Button> ); }Manifestación:
