La función de cierre de sesión se usa para cerrar la sesión de un usuario haciendo una llamada API y eliminando la información de este usuario de LocalStorage y de la tienda Redux. Por lo tanto, esta función utiliza dos ganchos: useDispatch y useFetch (gancho personalizado)
import {useDispatch} from 'react-redux' import {disconnectUser} from 'store/authentication/authentication.slice' import useFetch from 'api/useFetch' import {routes} from 'routes/url' type ResponseAPI = Record<string, never> function logout(): void { const dispatch = useDispatch() const {call: disconnect} = useFetch<ResponseAPI>('auth/logout', { fetchOnLoad: false, method: 'POST', }) disconnect() ?.then(() => { dispatch(disconnectUser()) localStorage.removeItem('authenticated') localStorage.removeItem('decodedId') localStorage.removeItem('token') localStorage.removeItem('username') location.replace(routes.login) }) .catch(error => Promise.reject(error)) return } export default logoutQuiero usar esta función de cierre de sesión en un botón, tan pronto como el usuario haga clic en el botón Cerrar sesión, se cerrará la sesión.
const LogoutButton = (): JSX.Element => { return ( <div className={styles.container}> <Button action={() => logout()}>Logout</Button> </div> ) } export default LogoutButtonLamentablemente me sale este error:
Error: llamada de gancho no válida. Los ganchos solo se pueden llamar dentro del cuerpo de un componente de función. Esto podría suceder por una de las siguientes razones:
- Es posible que tenga versiones que no coincidan de React y el renderizador (como React DOM)
- Podrías estar rompiendo las Reglas de los Hooks
- Es posible que tenga más de una copia de React en la misma aplicación Consulte https://reactjs.org/link/invalid-hook-call para obtener consejos sobre cómo depurar y solucionar este problema.
Tienes alguna idea ? Un gran gracias
cerrar sesión no es una función, es el gancho, y no puedes usar el gancho dentro de la función, porque cuando haces action={() => logout()} estás envolviendo el gancho dentro de la función. Lo cual no es válido en el componente de función.
<Button action={logout}>Logout</Button>De otra manera
function useLogout() { const dispatch = useDispatch(); const { call: disconnect } = useFetch < ResponseAPI > ("auth/logout", { fetchOnLoad: false, method: "POST", }); const logout = () => { disconnect() ?.then(() => { dispatch(disconnectUser()); localStorage.removeItem("authenticated"); localStorage.removeItem("decodedId"); localStorage.removeItem("token"); localStorage.removeItem("username"); location.replace(routes.login); }) .catch((error) => Promise.reject(error)); }; return { logout }; } // Component const LogoutButton = (): JSX.Element => { const { logout } = useLogout(); return ( <div className={styles.container}> <Button action={() => logout()}>Logout</Button> </div> ); };