// Fetch Products const fetchProducts = async () => { const { data } = await axios.get('/api/products') setProducts(data) } // Retrieve all products at reload useEffect(()=>{ fetchProducts() },[])`Esta es una función simple para recuperar productos cada vez que se carga el componente de la página de inicio. Entonces, cada vez que se carga, debe ejecutar fetchProducts(). Entendí que una matriz vacía no significa nada/ninguna dependencia, por lo que cuando el componente se monte, ejecutará esta función.
El error que recibo es "Línea 19: 7: React Hook useEffect tiene una dependencia faltante: 'fetchProduct'. Incluya o elimine la matriz de dependencias"
Soy nuevo en React y realmente no entiendo la declaración. ¿Por qué la eliminación de la matriz o la adición de la función a la dependencia cambiaría algo?
¿La forma en que está escrito no está haciendo exactamente lo que yo necesitaría que hiciera?
Ese error le dice que la función yow fetchProducts se ha utilizado dentro de yow hook, si desea solucionarlo, tiene dos opciones.
Añádelo a los soportes del gancho.
useEffect(()=>{},[fetchProducts]);O lo creó dentro del gancho.
useEffect(()=>{ const fetchProducts () =>{...}; fetchProducts() },[]);La forma en que lo tiene se considera un efecto secundario.
Esta advertencia es básicamente un problema de eslint, ya que en la matriz de dependencias toma un tipo primitivo, pero eslint no detecta correctamente las dependencias, por lo que puede solucionarlo desactivando eslint arriba de las líneas donde hay una advertencia. Si usa la lógica asíncrona en Effect, coloque su fetchProducts dentro de React.useCallback hook y agregue fetchProducts para usar la matriz de dependencia de Effect