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

Quiero que desaparezca esta alerta después de 2 o 3 segundos. Usé esta lógica, está bien y funciona, pero en mi consola, tengo esta advertencia:

Advertencia: no se puede realizar una actualización del estado Reaccionar en un componente desmontado. Esto es un no-op, pero indica una pérdida de memoria en su aplicación. Para solucionarlo, cancele todas las suscripciones y tareas asincrónicas en una función de limpieza useEffect.

¿Afecta a mi aplicación o está bien? Puedes darme una mejor idea para implementar esta lógica.

0
Ahmad Ebrahim 9 dic. 2020 a las 13:27

3 respuestas

La mejor respuesta

Puedes leer los comentarios.

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;
1
rotimi-best 9 dic. 2020 a las 10:52
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>}
  )
}
0
Kaung Khant Zaw 9 dic. 2020 a las 10:56

Esto mostrará la alerta durante 3 segundos, luego desaparecerá:

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>}
  )
}
0
Marc Charpentier 9 dic. 2020 a las 10:33
65214950