连续的 Material-UI Snackbars（使用 React-Redux）

Question

我没有将许多快餐栏分散在许多组件中，而是将我的应用程序重构为具有一个自定义组件，该组件被 Redux 调用以显示它需要的任何快餐栏变体。

预期行为：

当调用显示第二个小吃店时，当前小吃店的动画效果会顺畅地显示出来，而新的小吃店会出现动画效果，就像在 Material-UI official example 中一样。

当前行为：

目前，如果在另一个小吃店打开时调用一个小吃店，它只会替换现有小吃店的内容。因为没有制作新的零食栏，这很容易导致新的零食消息在片刻后消失，没有给用户时间阅读新消息。

我尝试从上面链接的官方 MUI 示例中复制代码并接近，但无法让它完美顺利地工作。 MyAttempt.jsx 就是这种尝试。 Demo.jsx 是此尝试之前的代码，并显示上述当前行为。

Answer 1

Ciao，你的问题是你在MyAttempt 组件中用来管理snackPack 的双重useEffect。当您从App.jsx 呼叫onShowSnackbar 时，您正在更改snackData 以显示新的零食内容。但是此时，这个 useEffect 会被触发：

React.useEffect(() => {
    setSnackPack((prev) => [...prev, { snackData, key: new Date().getTime() }]);
}, [snackData]);

这个改变了零食内容，你会看到一秒钟的新零食内容。然后这个其他 useEffect 将被触发：

React.useEffect(() => {
    if (snackPack.length && !messageInfo) {
      // Set a new snack when we don't have an active one
      setMessageInfo({ ...snackPack[0] });
      setSnackPack((prev) => prev.slice(1));
      setOpen(true);
    } else if (snackPack.length && messageInfo && open) {
      // Close an active snack when a new one is added
      setOpen(false);
    }
  }, [snackPack, messageInfo, open]);

这个关闭了旧的小吃并重新打开了新的。这就是闪烁的原因。

为避免这种情况，有必要在设置新的snackPack 之前将messageInfo 设置为undefined。所以把第一个useEffect改成这样：

React.useEffect(() => {
    setMessageInfo(undefined);   // set messageInfo to undefined
    setSnackPack((prev) => [...prev, { snackData, key: new Date().getTime() }]);
  }, [snackData]);

闪烁消失。

Here 你的密码箱已修改。