连续的Material-UI Snackbars带有React-Redux

问题描述

我将应用重构为只有一个自定义组件，该组件可以通过Redux进行调用，以显示所需的任何小吃条。

预期行为：

拨打电话以显示第二个小吃店时，当前的小吃店会进行平滑的动画设置，而新的小吃店会像Material-UI official example中那样进行动画处理。

当前行为：

当前，如果在另一个小吃店打开时调用了小吃店，它将仅替换现有小吃店的内容。因为没有制作新的小吃栏，所以很容易导致新的小吃消息稍后消失，而没有给用户时间来阅读新消息。

我尝试从上面链接的官方MUI示例中复制代码，但已接近完成，但无法使其完美流畅地工作。 MyAttempt.jsx是此尝试。 Demo.jsx是此尝试之前的代码，并显示上述当前行为。

解决方法

请注意，您遇到的问题是您用来管理useEffect组件中的snackPack的双重MyAttempt。当您从onShowSnackbar致电App.jsx时，您正在更改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]);

这一个关闭旧小吃，然后重新打开新小吃。这就是闪烁的原因。

为避免这种情况，必须在设置新的快餐包之前将messageInfo设置为undefined。因此，以这种方式更改第一个useEffect：

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

并且闪烁消失。

Here您的代码和框已修改。