const Navbar = () => { const [isModalOpen, setisModalOpen] = useState(true) const [isLogin, setisLogin] = useState(true) const onClose = () =>{ setisModalOpen(false) if(!isLogin){ setisLogin(true) } } return (<Modal isOpen={isModalOpen} onClose={() => onClose()} > {!isLogin ? <Register /> : <Login setisLogin={() => setisLogin(false)} /> } </Modal>) }cuando llamo al componente de función onclose, se vuelve a renderizar una vez con el valor de inicio de sesión, luego el modal se está cerrando
Usar setTimeout está resolviendo mi problema, pero creo que usar setTimeout no es una buena práctica.
const Navbar = () => { const [isModalOpen, setisModalOpen] = useState(true) const [isLogin, setisLogin] = useState(true) const onClose = () =>{ setisModalOpen(false) setTimeout(() => { if(!isLogin){ setisLogin(true) } }, 300); } return (<Modal isOpen={isModalOpen} onClose={() => onClose()} > {!isLogin ? <Register /> : <Login setisLogin={() => setisLogin(false)} /> } </Modal>) }Hay un par de formas en que puedes lograr esto. Estoy publicando la forma useEffect .
puede usar useEffect y escuchar en isLogin si cambia, activa la función setisLogin() .
código
const Navbar = () => { const [isModalOpen, setisModalOpen] = useState(true) const [isLogin, setisLogin] = useState(true) React.useEffect(() => { if(!isLogin){ setisLogin(true); } },[isModalOpen]) const onClose = () =>{ setisModalOpen(false) } return (<Modal isOpen={isModalOpen} onClose={() => onClose()} > {!isLogin ? <Register /> : <Login setisLogin={() => setisLogin(false)} /> } </Modal>) }useState y setState ya son de naturaleza asíncrona.
Como mencionó Shoyeb Memon , puede usar el gancho useEffect de React para "escuchar" los cambios con isModalOpen y actuar sobre esos cambios.
La implementación debería verse así:
const onClose = () =>{ setisModalOpen(false) } useEffect(() => { if(!isLogin){ setisLogin(true) } }, [isModalOpen]); Esta es la forma en que solemos manejar este tipo de situaciones en React,
donde necesitamos actuar ante un cambio de estado o de valores que recibimos de forma asíncrona.