[REACT]Material-ui 多个snackbar答案

【问题标题】：[REACT]Material-ui multiple snackbar[REACT]Material-ui 多个snackbar
【发布时间】：2021-08-11 00:28:24
【问题描述】：

我正在尝试使用material ui 的 Snackbar 获得多个警告，到目前为止它们一直不成功，我看到了一些 Vue 示例，但没有任何反应，有人可以帮助我吗？按照下面我的代码进行操作

https://codesandbox.io/embed/withered-sunset-ru3p3?fontsize=14&hidenavigation=1&theme=dark

【问题讨论】：

标签： javascript reactjs react-redux material-ui

【解决方案1】：

Material-ui does not allow 默认有多个snackbars。事实上，按照材料设计规范，这种行为是discouraged。虽然如果你真的想让它工作，你可以使用第三方库，例如 notistack，它使用与 material-ui 完全相同的组件。

【讨论】：

【解决方案2】：

我正在使用 react-redux 来存储我的消息。消息，列表类型；的每个元素都包含一个唯一的 id、一条消息和严重性，即 messages = [{'id': uuidv4(), 'message': 'invalid input', 'severity': 'error'}, {'id': uuidv4(), 'message': 'document updated successfully', 'severity': 'success'}] 其中 uuidv4() import { v4 as uuidv4 } from "uuid";。我为每个消息 ID 使用 uuid 而不是列表中的索引，因为一旦删除一个消息，不同的消息可以共享相同的索引。这种方法解决了 <Stack /> 仅显示 1 个 <Snackbar />（或多个 Snackbars 但彼此重叠）的问题。

/// reducer
case SNACKBAR_WRITE:
  return {
    ...state,
    messages: [
      ...state.messages,
      {
        id: uuidv4(),
        message: payload.message,
        severity: payload.severity,
      },
    ],
  };
case SNACKBAR_DELETE:
  return {
    ...state,
    messages: state.messages.filter((message) => message.id !== payload),
  };

/// custom component
import React, { useEffect } from "react";
import { connect } from "react-redux";
import { remove_snackbar } from "../../actions/auth";
import { Alert } from "@mui/material";

const CustomAlert = ({ message, remove_snackbar }) => {
    useEffect(() => {
      setTimeout(function () {
          remove_snackbar(message.id);
      }, 8000);
    }, [message, remove_snackbar]);

    const handleAlertClose = (event, reason) => {
      if (reason === "clickaway") {
          return;
      }
      remove_snackbar(message.id);
    };

    return (
      <Alert
          onClose={handleAlertClose}
          elevation={6}
          variant="filled"
          severity={message.severity}
      >
          {message.message}
      </Alert>
    );
};

export default connect(null, { remove_snackbar })(CustomAlert);

///main jsx
<Stack sx={{ position: "absolute", bottom: 24, right: 24 }} spacing={2}>
   {messages.map((message) => (<CustomAlert message={message} key={message.id} />))}
</Stack>

【讨论】：