Estoy implementando la paginación donde tengo una variable useState que cambio con un cambio en el número de página, a continuación está el código donde uso dos useEffects para llamar a los datos de pagenumber y pagenumber+1 para verificar si arroja un 404, así que sé cuándo dejar de mostrar el siguiente botón.
useEffect(() => { async function fetchData() { try { const baseUrl = 'https://gateway.marvel.com:443/v1/public/characters'; const url = baseUrl + '?ts=' + ts + '&apikey=' + publickey + '&hash=' + hash+ '&limit=100&offset='+parseInt(pageNumber)*50; const { data } = await axios.get(url); setCharactersData(data.data.results); setLoading(false); } catch (e) { setCharactersData([]); console.log(e); } } fetchData(); }, [ pageNumber ]); useEffect(() => { async function fetchData() { try { const baseUrl = 'https://gateway.marvel.com:443/v1/public/characters'; const url = baseUrl + '?ts=' + ts + '&apikey=' + publickey + '&hash=' + hash+ '&limit=100&offset='+(parseInt(pageNumber)+1)*50; const { data } = await axios.get(url); console.log(data); setNewData(data.data.results); setLoading(false); } catch (e) { setNewData([]); console.log(e); } } fetchData(); }, [ pageNumber ]);Parte de retorno:
return ( <div> { parseInt(pageNumber)!==0 && <Link className='characterlink1' to={`/characters/page/${parseInt(pageNumber)-1}`}> Previous </Link>} { charactersData.length===0 && <Four />} { newData.length>0 && <Link className='characterlink2' to={`/characters/page/${parseInt(pageNumber)+1}`}> Next </Link>}Esto funcionaba bien hasta que agregué las líneas:
Agregué estas líneas para agregar una página 404 si la URL tiene un número de página mayor que los números de página disponibles. Cuando hago esto me sale un error que dice:
TypeError: Cannot read properties of undefined (reading 'length')Lo extraño es que no veo este error hasta que cambio la URL 3 o 4 veces.
Estás cambiando tu estado en un bloque catch, que no es como se supone que debes cambiar tu estado. En cambio, diría que es mejor intentar inicializar su estado con la matriz vacía para que la propiedad de length siempre exista, eliminando así el error. Tal cosa se puede hacer así:
const [charactersData, setCharactersData] = useState([]);O con el tipo de los caracteresData (yay mecanografiado)
const [charactersData, setCharactersData] = useState<charactersDataType>([]);¿Es porque usó Pascal casing en sus bloques de búsqueda y usó camelcasing en el bloque de retorno?
return ( <div> { parseInt(pageNumber)!==0 && <Link className='characterlink1' to={`/characters/page/${parseInt(pageNumber)-1}`}> Previous </Link>} { CharactersData.length===0 && <Four />} { newData.length>0 && <Link className='characterlink2' to={`/characters/page/${parseInt(pageNumber)+1}`}> Next </Link>}