React：Material UI Snackbar无法显示自定义Alert问题排查

我自定义了Alert组件，单独使用Alert时消息能正常显示，但嵌套进Snackbar后就无法展示。以下是修改后的AlertPopup代码，AlertContext和useAlert部分未改动：

AlertPopup 代码:

const AlertPopup = () => {
  const { text, type } = useAlert();

  if (text && type) {
    return (

      // 单独使用此代码时，消息可正常显示
      // <Alert variant="filled" severity={type} sx={{}}>
      //   {text}
      // </Alert>

      // 使用此代码时，消息无法显示
      <Stack spacing={2} sx={{ width: '100%' }}>
      <Snackbar autoHideDuration={6000}>
      <Alert variant="filled" severity={type} >
        {text}
      </Alert>
      </Snackbar>
      </Stack>

    );
  } else {
    return <></>;
  }
};

请问这个实现里缺少了什么？

问题出在Material-UI的Snackbar组件需要明确的open属性来控制显示状态，你的代码里没有传递这个属性，导致Snackbar默认处于关闭状态，嵌套的Alert自然无法展示。

修复步骤： #

1. 给Snackbar添加open属性，绑定控制显示的状态变量
2. 添加onClose回调，处理自动隐藏或手动关闭的逻辑

方案一：如果useAlert已维护显示状态

假设你的useAlert钩子已经提供了open状态和onClose关闭方法，直接传入即可：

const AlertPopup = () => {
  const { text, type, open, onClose } = useAlert();

  if (text && type) {
    return (
      <Stack spacing={2} sx={{ width: '100%' }}>
        <Snackbar 
          open={open} 
          autoHideDuration={6000} 
          onClose={onClose}
        >
          <Alert 
            variant="filled" 
            severity={type} 
            onClose={onClose}
          >
            {text}
          </Alert>
        </Snackbar>
      </Stack>
    );
  } else {
    return <></>;
  }
};

方案二：组件内部自行维护状态

如果useAlert没有提供显示状态，可在组件内用useState和useEffect管理：

import React from 'react';

const AlertPopup = () => {
  const { text, type } = useAlert();
  const [open, setOpen] = React.useState(!!(text && type));

  // 当text或type变化时同步更新显示状态
  React.useEffect(() => {
    setOpen(!!(text && type));
  }, [text, type]);

  const handleClose = () => setOpen(false);

  if (text && type) {
    return (
      <Stack spacing={2} sx={{ width: '100%' }}>
        <Snackbar 
          open={open} 
          autoHideDuration={6000} 
          onClose={handleClose}
        >
          <Alert 
            variant="filled" 
            severity={type} 
            onClose={handleClose}
          >
            {text}
          </Alert>
        </Snackbar>
      </Stack>
    );
  } else {
    return <></>;
  }
};

核心逻辑就是通过open属性明确告知Snackbar何时显示，没有这个属性的话，组件默认不会渲染内部内容。

内容的提问来源于stack exchange，提问作者Jack