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

Posted 2023-03-16

【中文标题】连续的 Material-UI Snackbars（使用 React-Redux）

【英文标题】：Consecutive Material-UI Snackbars (with React-Redux)

【发布时间】：2020-12-15 06:13:10

【问题描述】：

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

预期行为：

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

当前行为：

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

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

【参考方案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 你的密码箱已修改。

【讨论】：

谢谢，但这仍然会留下一点点闪烁，它大大减少了时间，但它仍然会在第一个零食消失之前改变它的内容。它非常快，但它仍然存在，与官方示例不同

这也会阻止第二个 useEffect 中的 else if 块运行，因为它使 snackPack.length && messageInfo && open 永远不会为真（可以通过控制台日志检查）