Creé un componente llamado Alertify.js
import React, {useEffect, useState} from "react"; import { Alert } from 'reactstrap'; function Alertify(props){ const [show, setShow] = useState(props.show); useEffect( () => { let timer = setTimeout(() => setShow(false), 3000); return () => { clearTimeout(timer); }; }, [] ); return ( <Alert color={props.color} className={show ? 'float active' : 'float'}>{props.text}</Alert> ) } export default Alertify; Y usado en index.js
import Alertify from "../Component/Alertify"; const [showAlert, setShowAlert] = useState(false); return... <Alertify text={'hello world'} color={'danger'} show={showAlert}/>Y mostrará esta alerta después de que una condición sea verdadera:
if(condition){ setShowAlert(true) }Pero algo anda mal y no muestra la alerta bajo condición, y soy novato en reactjs, ¿alguna idea de cómo solucionar esto? Todo lo que quiero es mostrar la alerta después de que la condición sea verdadera, luego ocultarla después de 3 segundos.
También muestra si useEffect pero antes de que la condición sea verdadera, y tampoco se oculta.
Prueba lo siguiente
const [show, setShow] = useState(false); useEffect(() => { if (props.show) { setShow(true) } },[props.show]) Puede dejar que su useEffect existente se borre después de 3 segundos como está.
EDITAR:
Aquí hay un enfoque modificado, su componente Alertify se ve así
import React, { useEffect, useState } from "react"; import { Alert } from "reactstrap"; function Alertify(props: { show: any; color: string; text: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal; setShowAlert: (value: boolean) => void; }) { const [show, setShow] = useState(false); useEffect(() => { let timer = setTimeout(() => { return setShow(false); }, 3000); return () => { clearTimeout(timer); }; }); useEffect(() => { if (props.show) { setShow(true); props.setShowAlert(false); } }, [props.show, props.setShowAlert]); if (show) { return ( <Alert color={props.color} className={show ? "float active" : "float"}> {props.text} </Alert> ); } return null; } export default Alertify;Su componente de llamada entonces se ve así
import "./styles.css"; import Alertify from "./Alertify"; import { useState } from "react"; export default function App() { const [showAlert, setShowAlert] = useState(false); return ( <> <div className="App"> <Alertify text={"hello world"} color={"danger"} show={showAlert} setShowAlert={setShowAlert} /> </div> <button onClick={() => setShowAlert(true)}>show alert</button> </> ); }Aquí está el enlace de codesandbox https://codesandbox.io/s/alertify-stackoverflow-x096t
Prueba este código. Puede controlar la representación del componente Alertify en index.js. Si el valor showAlert es verdadero, React renderiza el componente Alertify. Cuando se ejecuta setTimeout, el valor showAlert será falso, lo que significa que React desmonta el componente Alertify. Esto es como mostrar y ocultar el efecto que necesita.
// index.js import Alertify from "../Component/Alertify"; const [showAlert, setShowAlert] = useState(false); if (condition( { setShowAlert(true); // This makes Alertify component mount immediatly. setTimeout(setShowAlert(false),3000); // This makes Alertify component unmount in 3,000ms. } return... {showAlert && <Alertify text={'hello world'} color={'danger'}/>}Por lo tanto, no necesita usar useEffect para ocultar este componente.
// Alertify.js import React, {useEffect, useState} from "react"; import { Alert } from 'reactstrap'; function Alertify(props){ return ( <Alert color={props.color} className={'float active'}>{props.text </Alert> ) }; export default Alertify;