重新渲染时重置Snackbar中的自动隐藏计时器

import React, { useState, useRef } from 'react';
import { Snackbar } from '@material-ui/core';

const MyComponent = () => {
  const [open, setOpen] = useState(false);
  const timerRef = useRef(null);

  const handleClick = () => {
    setOpen(true);
    if (timerRef.current) {
      clearTimeout(timerRef.current);
    }
    timerRef.current = setTimeout(() => {
      setOpen(false);
    }, 3000); // 3秒后自动隐藏
  };

  const handleClose = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }
    setOpen(false);
  };

  return (
    <div>
      <button onClick={handleClick}>Show Snackbar</button>
      <Snackbar
        open={open}
        autoHideDuration={3000}
        onClose={handleClose}
        message="This is a snackbar"
      />
    </div>
  );
};

export default MyComponent;