Tengo un componente de Home en el que llamo a una API, obtengo los datos y los almaceno en un estado. Y finalmente mostrar los datos de forma ordenada. Aquí está el código
import React, { useContext } from "react"; import styled from "styled-components"; //import context import MainContext from "../context/MainContext"; //api import { homeDataURL, topSearchesURL } from "../api/base"; import { getResponse } from "../api"; const Home = () => { const { topSearches, setTopSearches } = useContext(MainContext); getResponse( topSearchesURL(), (data) => { setTopSearches(data); }, (err) => alert(err) ); return <div></div>; }; export default Home; Y la función getResponse()
export const getResponse = (url, callback, errcallback) => { axios .get(url) .then((data) => { if (callback != null) { callback(data.data); } }) .catch((err) => { if (errcallback != null) { errcallback(err); } }); }; Pero esta función va a un ciclo infinito con numerosos aciertos de API, quiero que esto se ejecute solo una vez cuando se carga el componente Home .
Hay un useEffect de gancho React que necesita una matriz de dependencia, dejándolo en blanco como este
useEffect(() => { getResponse( topSearchesURL(), (data) => { setTopSearches(data); console.log(data) }, (err) => alert(err) ); }, []) da una advertencia React Hook useEffect has a missing dependency: 'setTopSearches'. Either include it or remove the dependency array react-hooks/exhaustive-deps Eliminar la dependencia de la matriz no es una opción, entonces, ¿qué debo hacer? Hay alguna otra manera de hacer esto?
No está devolviendo la promesa de Axios, y tampoco necesita usar la devolución de llamada use async/await.
export const getResponse = (url) => axios.get(url).then((data) => data.data); // Component const apiUrl = topSearchesURL(); useEffect(() => { const run = async () => { try { const data = await getResponse(apiUrl); setTopSearches(data); } catch (error) { alert("Something went wrong"); } }; run(); }, [apiUrl]);