组件更新时重置 Snackbar 上的 autoHideDuration 计时器

Posted 2023-02-23

【中文标题】组件更新时重置 Snackbar 上的 autoHideDuration 计时器

【英文标题】：Reset autoHideDuration timer on Snackbar when component updates

【发布时间】：2021-10-17 16:16:55

【问题描述】：

我希望小吃栏仅在组件未更新时在 2 秒内超时。如果它更新，我希望计时器在尚未达到 2 秒时重置。

useEffect(() => 
          setOpen(true)
        
    ,[props.single_message])

        return(
           
        <div>
            props.single_message.length !== 0 
                    ?
                    <Snackbar open=open autoHideDuration=2000 
                        onClose=() => setOpen(false) 
                        anchorOrigin= vertical: 'top', horizontal: 'center'  >
                            <SnackbarContent aria-describedby="message-id2"
                                className=classes.snackbarStyleViaNestedContent
                                message=props.single_message[0]
                                action=action
                            />
                    </Snackbar>

                    :
                    null
            
                
                
        </div>
    )

如果 autoHideDuration 尚未完成，如何在组件更新时重置 autoHideDuration。如果 autoHideDuration 无法实现，还有其他方法吗？

【参考方案1】：

我认为最好的方法是这样的：

var timeout;
const [open, setOpen] = useState(false);

<Button
  onClick=() => 
    setOpen(true);
    clearTimeout(timeout);
    timeout = setTimeout(function () 
      setOpen(false);
    , 2000);
  
/>
<Snackbar
  open=open
  onClose=() => setOpen(false)
  message="Test snackbar"
/>

但是也许这样的事情（使用当前时间）可以工作：

const [closeTime, setCloseTime] = useState(0);

<Button onClick=() => setCloseTime(Date.now() + 2000) />
<Snackbar
  open=closeTime > Date.now()
  onClose=() => setCloseTime(0)
  message="Test snackbar"
/>

【讨论】：

很棒的东西。第一部分按预期工作。