React Hooks, setTimeOut 将 State 设置为 false

Question

我有这种情况

const [showAlertLink, setShowAlertLink] = useState(false);

 const handleClick = () => {
     setShowAlertLink(true);
  };

<Button disableRipple onClick={handleClick}>

{!!showAlertLink &&  <Alert icon={<CheckIcon fontSize="inherit" />} onClose={() => setShowAlertLink(false)}>{t(`alert_link_copied`)}</Alert>}

目前，如果我点击图标，我可以关闭警报。 例如，如何使用SetTimeout持续时间 2 秒自动关闭此警报？

Answer 1

您可以使用useEffect ：

  useEffect(() => {
    let timeout
    if (showAlertLink) {
      timeout = setTimeout(() => setShowAlertLink(false), 2000);
    }
    return () => clearTimeout(timeout);
  }, [showAlertLink]);

它将在showAlertLink值更改时触发。 如果为true ，它将设置超时以在 2 秒内将其设置为假（ 2000 ）。

请注意，您始终返回效果以清除超时（以确保您不会tried to update state of an unmounted component ）错误。

如果您使用的是 typescript，您可以像这样键入timeout ：

let timeout: ReturnType<typeof setTimeout>;