如何在 mui v5 Snackbar 中動態創建多個警報

Question

我打電話給 API 做一些動作。
我想獲取每個動作的響應並將其顯示在 Snackbar/alert 中。

即使在迭代 map 中的消息后，我也只能顯示第一個響應，而不能顯示其他任何內容。

這是我調用 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 將打開帶有警報的 Snackbar

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

唯一的問題是它只顯示第一個動作，沒有別的。

在沙盒上編輯

我懷疑警報相互重疊也許我們需要添加某種 AutoGrow 道具

Answer 1

您必須按照MUI doc中的說明使用notistack ：

這個例子演示了如何使用notistack 。 notistack 有一個命令式 API ，可以輕松顯示小吃吧，而無需處理它們的打開/關閉 state。 它還使您能夠將它們堆疊在一起（盡管 Material Design 指南不鼓勵這樣做）。

首先將您的應用程序包裝在SnackbarProvider組件中，然后使用useSnackbar鈎子訪問enqueueSnackbar以便將小吃欄添加到要顯示的隊列中：

應用程序.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>
  );
}

通知.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>
  );
}

演示：