Question

我正在使用Redux的消息显示Material-UI快餐栏：

const MySnackBar = () => {
  const message = useSelector(({ data }: RootState) => data.message)
  
  return (
    <Snackbar open={ !!message }>
      <Alert variant={ 'filled' }>{ message }</Alert>
    </Snackbar>
  )
}

我有一些redux操作，这些操作会将消息写入商店，然后在超时后清除消息（message = ''）。

export const showMessage = (dispatch: any, message: string) => {
  dispatch(setMessage(message))
  setTimeout(() => dispatch(clearMessage()), 3000)
}

这是可行的，只是在小吃店实际消失之前，它会显示空白消息。

我想这是因为过渡动画的工作原理，一旦open设置为false，小吃栏就会开始动画。

实现小吃店以使其“正确”隐藏的最佳方法是什么？

我想象一种解决方案是在我的商店中有一个布尔showSnackbar条目，而不清除消息。这似乎有些笨拙，需要两条信息而不是一条信息，而且我不喜欢在不显示消息时将消息留在商店中的味道。

但是我想尽管有这些“缺点”，也许那仍然是最好的方法。

人们喜欢做什么？

小吃店在清除之前显示空消息

0 个答案: