Había leído algunas preguntas y un artículo sobre este tema, incluido este : pero no encuentro mi respuesta.
considera este código.
function Component({ page }) { const [list, setList] = useState([]); useEffect(() => { axios.get([url] + page).then(newList => { setList([...list, ...newList]); }); }, [page, list]); return ['some jsx for map though list']; };tengo una paginación y cada vez que voy a la página siguiente necesito concatenar los datos con la anterior, este es el trato.
la reacción se queja de la matriz de dependencias sobre la list y la page .
Estoy de acuerdo con la page porque cada vez que cambia necesito obtener más datos. pero cuando agrego la list a la matriz de dependencias, useEffect encuentra cambios en la list y obtiene más datos que causan un bucle infinito.
sé acerca de los ganchos, pero me pregunto cuál es la mejor práctica para resolver este problema.
Su lista se actualiza en cada page o actualización de dependencia de la list , lo que da como resultado un bucle infinito. Eliminar el argumento de la list de la matriz de dependencia solucionará su error.
Dentro de useEffect , no necesitarías una list en absoluto.
useEffect(() => { axios.get([url] + page).then(newList => { setList(prev => [...prev, ...newList]); }); }, [page]); Dado que el método está definido en este componente, ni siquiera necesitaría ganchos useCallback para memorizar la función. Y eslint tampoco lanzará advertencias.
No puedo creer esto, la respuesta fue tan simple.
function Component({ page }) { const [list, setList] = useState([]); useEffect(() => { axios.get([url] + page).then(newList => { // in this line if you merge two arrays with callback function // eslint never complain about the list dependency setList(list => [...list, ...newList]); // like this }); }, [page]); return ['some jsx for map though list']; };