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

Question

我希望快餐栏仅在组件未更新时超时 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，还有其他方法吗？

Answer 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"
/>

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

Reset autoHideDuration timer on Snackbar when component updates

reactjs

snackbar

material-ui