Reactjs 阻止文本更新，直到组件(Dialog、Snackbar 等)关闭

发布于02月25日

我实现了一个Dialog组件，它显示一些状态变量的值.

当Dialog关闭时，状态变量重置为默认值.问题是，尽管Dialog人在不到一秒的时间内就结束了比赛，但仍然有足够的时间看到文本发生了变化.

有没有办法阻止文本更改，直到Dialog真正关闭？在将其他状态变量重置为默认值之前，我try 先将dialogOpen状态变量设置为false，但没有帮助，因为它发生得太快，并且无论如何都会对状态变化做出react .

<Dialog
    open = {dialogOpen}
    onClose = {() => handleDialogClose()}
    ... />

handleDialogClose():

const handleDialogClose = () =>
{
    setDialogOpen(false)
    setStateVariables(DEFAULT_VALUES)
}

我认为这个问题对更多的组件来说是普遍的，而不仅仅是Dialog，因为它也会出现在Snackbar个组件上的文本中.所有这些问题的总体解决方案都是最好的，但任何方法都会有所帮助.

编辑:Dialog使用Fade转换，其中timeout.exit延迟约为200ms.根据@technophyle下面的回答，使用setTimeout()延迟更新状态变量是有效的.传递到setTimeout()的延迟可以是0，额外的时间仍然足以防止看到变化.

推荐答案