当组件更新时，重置零食栏上的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"
/>

Answer 2

如果你想使用useEffect，我是这样做的。

function Snacky({message}) {
const [open, setOpen] = useState(false);
const [timer, setTimer] = useState();
// This will display the snackbar and reset the timer whenever
// the message prop changes to a non-falsy value
useEffect(() => {
setOpen(Boolean(message));
// Clear any timeouts in progress
clearTimeout(timer);
const timeout = setTimeout(() => {
setOpen(false);
}, 4000);
setTimer(timeout);
// Cleanup function
return () => clearTimeout(timeout);
}, [message]);
return (
<Snackbar
open={open}
message={message}
action={
<IconButton size="small" color="secondary" onClick={handleClose}>
<CloseIcon fontSize="small" />
</IconButton>
}
/>
);
}