Estoy creando una aplicación con reaccionar. Tengo que buscar varios datos. Esta es mi declaración de búsqueda:
const [periods] = useFetch('/company/' + slug + '/waterfall?colIndexOffset=6 '); Al final de la línea, es un 6 pero tengo este tipo de problema. Tengo períodos y estos períodos se cambian para cada objeto.
const [period_waterfall] = useFetch('/company/' + firminfo.code + '/periods');Llamo al período desde allí y encuentro la duración de los períodos de esta manera:
var length = period_waterfall.periods.length Debería llamar a esta búsqueda de periods varias veces (número de length ).
Intenté esto:
for (let i = 0; i < length; i++) { my_array.push(useFetch('/company/' + slug + '/waterfall?colIndexOffset=' + i)) }Pero da error: React Hook "useFetch" puede ejecutarse más de una vez. Posiblemente porque se llama en un bucle.
¿Cómo puedo manejarlo?
Estás tratando de llamar a un gancho dentro de un bucle. Esta es una mala práctica y no está permitida. Los ganchos siempre se deben llamar en el nivel superior.
También está utilizando un enlace predefinido para la recuperación de datos. Este gancho está destinado a hacer una búsqueda. En su orden particular, debe hacer esto en una operación de bucle, lo que significa que el gancho que está usando no se ajusta a sus necesidades.
Lo que puede hacer es crear una función que busque en lugar de usar el gancho. Me gusta usar axios.
const getPeriods = async (offset, slug) => { const url = '/company/' + slug + '/waterfall?colIndexOffset=' + offset const response = await axios.get(url) return response.data }En esta función, está obteniendo 1 artículo. Puede reescribirlo para que haga el bucle dentro de él, o puede llamarlo dentro de un bucle
for (let i = 0; i < length; i++) { my_array.push(await getPeriods(i, slug) } Tenga en cuenta que el ciclo está usando await , lo que significa que debe estar dentro de una función asíncrona. Si no quieres eso, siempre puedes hacer algo como esto:
getPeriods(i, slug).then((res) => { my_array.push(res.data) }Espero que esto ayude a resolver tu problema.