如何在 React JS 中 5 秒后消失警报？答案

【问题标题】：How to disappear alert after 5 seconds in React JS?如何在 React JS 中 5 秒后消失警报？
【发布时间】：2023-03-29 20:36:02
【问题描述】：

import { useState } from 'react'
    
    const Message = ({ variant, children }) => {
      const [timeOut, setTimeOut] = useState(null)
    
      setTimeout(() => {
        setTimeOut(1)
      }, 3000)
    
      return (
        timeOut !== 1 && <div className={`alert alert-${variant}`}>{children}</div>
      )
    }
    
    Message.defaultPros = {
      variant: 'info',
    }
    
    export default Message

我想在 2 或 3 秒后消失此警报。我使用了这个逻辑，它很好并且可以工作，但是在我的控制台中，我收到了这个警告：

警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 useEffect 中的所有订阅和异步任务清理功能。

它会影响我的应用还是可以？你可以给我一个更好的想法来实现这个逻辑。

【问题讨论】：

警报的目的是确保用户确认某些内容。您可以“确定”的方式是让用户单击关闭按钮：他/她执行了自愿交互，因此他/她一定已经看到了。几秒钟后自动关闭的警报违背了这个目的：也许用户在显示时分心了，她/他在关闭之前没有看到它。因此，如果消息非常重要，您必须确保它已被看到，警报不应在超时时关闭，如果不是，则不应使用警报，而应使用侵入性较小的通知形式。

标签： javascript reactjs react-bootstrap

【解决方案1】：

这将在 3 秒内显示警报，然后消失：

import React, { useEffect, useState } from 'react';

const Message = ({ variant, children }) => {
  // the alert is displayed by default
  const [alert, setAlert] = useState(true);
      
  useEffect(() => {
    // when the component is mounted, the alert is displayed for 3 seconds
    setTimeout(() => {
      setAlert(false);
    }, 3000);
  }, []);     
    
  return (
    {alert && <div className={`alert alert-${variant}`}>{children}</div>}
  )
}

【讨论】：

不过，我在控制台中有警告
警告是什么？你的组件顶部有import React 吗？
"警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，取消所有订阅和异步任务在 useEffect 清理功能中。”这是警告，当我在超时未完成时发送消息时它会显示它的工作。是的，我正在使用已经导入的 React 17。
它可能来自另一个组件，您是否在其他地方使用useEffect
是的。如果我每次都等待 3 秒，则警报很好，但是当我连续 2 或 3 次调用该警报时，它会显示 WARNING

【解决方案2】：

你可以通读cmets

import { useState, useEffect } from 'react'
    
const Message = ({ variant, children }) => {
  const [show, setShow] = useState(true)

  // On componentDidMount set the timer
  useEffect(() => {
    const timeId = setTimeout(() => {
      // After 3 seconds set the show value to false
      setShow(false)
    }, 3000)

    return () => {
      clearTimeout(timeId)
    }
  }, []);

  // If show is false the component will return null and stop here
  if (!show) {
    return null;
  }

  // If show is true this will be returned
  return (
    <div className={`alert alert-${variant}`}>
      {children}
    </div>
  )
}

Message.defaultPros = {
  variant: 'info',
}

export default Message;

【讨论】：

不过，我在控制台中有警告
如果组件卸载，您需要清除 timeId。但是我不知道为什么您的组件会在 3 秒前卸载。您有一个未在问题中显示的父组件
例如当我使用错误信息登录时它显示的警报。第一次没问题，但如果在 3 秒内再次输入错误信息，那就是 WARNING 出现的时间。
你试过我更新的代码了吗？注意useEffect中有一个返回函数，就是handles componentWillUnmount

【解决方案3】：

import React, { useEffect, useState } from 'react';

const Message = ({ variant, children }) => {

  const [alert, setAlert] = useState(true);
      
  useEffect(() => {
    const timer = setTimeout(() => {
      setAlert(false);
    }, 3000);
    
    // To clear or cancel a timer, you call the clearTimeout(); method, 
    // passing in the timer object that you created into clearTimeout().
    
    return () => clearTimeout(timer);
  }, []);     
    
  return (
    {alert && <div className={`alert alert-${variant}`}>{children}</div>}
  )
}

【讨论】：