-1

en la versión 18 de react no permite colocar un array vacío como segundo argumento en el useEfecct me salta el siguiente error " React Hook useEffect has a missing dependency: 'history'. Either include it or remove the dependency array"

este es mi código

function Listado(){
const history = useHistory();

 useEffect(() => {
    const token = localStorage.getItem("token");
      if (token === null) {
        history.push('/');
         }
      }, []);
1

3 respuestas 3

0

Lo que te dice es que incluyas o elimine la matriz de dependencia, intenta hacerlo de esta manera eso permite, estar al tanto de los cambios del localStorage

 const token = localStorage.getItem("token");
 const history = useHistory();
 
  useEffect(() => {
      if (token === null) {
        history.push('/');
      }
  }, [token]);
  

si no funciona agrégale al array [token, history]

0

El error es bastante explanatorio por sí mismo.

useEffect es un hook de React que ejecuta 'efectos' o en otras palabras, ejecuta el código de la función que le pasamos cuando una de sus dependencias cambian.

En tu caso, entiendo que solo quieres que funcione una vez: ESLINT te está diciendo que estás haciendo uso de history, y history puede que no esté listo al principio; lo correcto sería que metas history dentro del array de dependencias.

No te preocupes por ejecutarse más de una vez ya que history no cambiará durante toda la ejecución.

function Listado(){
const history = useHistory();

 useEffect(() => {
    const token = localStorage.getItem("token");
      if (token === null) {
        history.push('/');
         }
      }, [history]);
-1

La advertencia "React Hook useEffect tiene una dependencia faltante" ocurre cuando el useEffect hook hace uso de una variable o función que no hemos incluido en su matriz de dependencia. Para resolver el error, deshabilite la regla para una línea o mueva la variable dentro del enlace useEffect.

function Listado(){


useEffect(() => {
 const history = useHistory();
 const token = 
 localStorage.getItem("token");
  if (token === null) {
    history.push('/');
     }
  }, []);

Esto elimina la advertencia porque el enlace ya no depende del objeto porque se declara dentro de él.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.