¿Cómo puedo resolver la Línea 31: 6: React Hook useEffect tiene dependencias faltantes: 'fetchUserName' e 'history'. ¿ Incluirlos o eliminar la matriz de dependencias react-hooks/exhaustive-deps ? No soy capaz de resolverlo. Estoy usando Firebase para la autenticación. ¡¡¡¡¡Por favor, ayúdame!!!!!
import React, { useEffect, useState } from "react"; import { useAuthState } from "react-firebase-hooks/auth"; import { useHistory } from "react-router"; import "./Dashboard.css"; import { auth, db, logout } from "./firebase"; function Dashboard() { const [user, loading] = useAuthState(auth); const [name, setName] = useState(""); const history = useHistory(); const fetchUserName = async () => { try { const query = await db .collection("users") .where("uid", "==", user?.uid) .get(); const data = await query.docs[0].data(); setName(data.name); } catch (err) { console.error(err); alert("An error occured while fetching user data"); } }; useEffect(() => { if (loading) return; if (!user) return history.replace("/"); fetchUserName(); }, [user, loading]); return ( <div className="dashboard"> <div className="dashboard__container"> Logged in as <div>{name}</div> <div>{user?.email}</div> <button className="dashboard__btn" onClick={logout}> Logout </button> </div> </div> ); } export default Dashboard;Normalmente, debería estar bien agregar 'fetchUserName' e 'history' a la matriz al final de useEffect:
useEffect(() => { if (loading) return; if (!user) return history.replace("/"); fetchUserName(); }, [ user, loading, fetchUserName, history ]);El componente funcional React usa cierres.
cuando se actualiza el estado, no todas las funciones conocen el valor actualizado, solo conocen el valor inicializado
cuando usa useEffect , debe asegurarse de que el gancho useEffect conozca los valores actualizados, incluso más, las funciones que invoca useEffect también necesitan conocer los valores actualizados, por lo que si tiene una advertencia que dice que le faltan algunas dependencias, probablemente necesite para escucharlo
Si realmente no lo necesita y desea eliminar la advertencia, puede poner esto justo antes del final de useEffect/ useCallback
// eslint-disable-next-line react-hooks/exhaustive-depsPero nuevamente, no enviaron esto por error, hay razones por las que lo envían y algunas buenas.
podrías usar esto
useEffect(() => { if (loading) return; if (!user) return history.replace("/"); fetchUserName(); // eslint-disable-next-line }, [user, loading]);