Tengo una API que a veces no funciona. Me gustaría que la aplicación vuelva a buscar automáticamente si esto sucede hasta que obtenga los datos necesarios. ¿Cómo puedo hacer eso? Estoy pensando que tal vez esto podría hacerse usando una dependencia en el gancho useEffect , pero no tengo claro cómo hacerlo.
Digamos que tenemos este componente de aplicación
export default function App() { const [data, setData] = useState([]) useEffect(() => { getData({ setData }) }, []) return [ <h3> {data[0].title} </h3> ] }Y este componente API
const url = 'https://some-random-url.com/whatever-api' export default function getData({ setData }) { axios.get(url) .then((response) => { let dataArray = response.data.results setData(dataArray) }) .catch((error) => { console.log(error) }) }Si tuviera que hacerlo con useEffect , podría pasar un estado de contador de errores a la función getData y aumentarlo en caso de error o datos vacíos. Luego agregue a su matriz de dependencia useEffect para recuperar. Pero esto ciertamente implica que debe pensar más en lo que desea hacer después de una cierta cantidad de reintentos, para evitar un bucle infinito.
export default function App() { const [data, setData] = useState([]) const [errCount, setErrCount] = useState(0) useEffect(() => { getData({ setData, errCount, setErrCount }) }, [errCount]) return [ <h3> {data[0].title} </h3> ] }Y este componente API
const url = 'https://some-random-url.com/whatever-api' export default function getData({ setData, errCount, setErrCount }) { axios.get(url) .then((response) => { let dataArray = response.data.results setData(dataArray) !dataArray.length && setErrCount(errCount+1); }) .catch((error) => { setErrCount(errCount+1); console.log(error) }) }