Estoy usando axios para llamar a una API para recuperar imágenes cuando se presiona un botón. El problema que tengo es que recibo errores cuando uso photos.forEach diciendo que forEach no es una función. Actualmente, usando el ciclo for, solo muestra el primer resultado. Cuando hago console.log, la matriz está llena de fotos, ¡solo tengo dificultades para acceder a ellas! Estoy seguro de que esto es simple, actualmente estoy aprendiendo js y reacciono y necesito orientación. ¡Gracias!
function Facebook() { const [photos, setPhotos] = useState(''); const getData = () => { axios .request(options) .then(function (response) { const data = response.data.photos.data; setPhotos( data.map((image) => { return image.picture; }), ); }) .catch(function (error) { console.error(error); }); }; //console.log(photos.length); //console.table(photos); const photoList = () => { for (let i = 0; i < photos.length; i++) { console.table(photos); return <img className='img image-full' src={photos[i]} />; } }; return ( <div> <button onClick={getData} className='inline-block px-4 py-3 text-sm font-semibold text-center text-white uppercase transition duration-200 ease-in-out bg-indigo-500 rounded-md cursor-pointer hover:bg-indigo-600'> Tailwind Button </button> <div className='flex flex-row mx-auto'> <ul> <li>{photoList()}</li> </ul> </div> </div> ); } export default Facebook;Puede inicializar fotos con una matriz vacía, o simplemente dejarlo sin definir y verificar si está configurado cuando acceda a él más tarde. Sin embargo, preferiría usar una matriz vacía:
function Facebook() { const [photos, setPhotos] = useState([]); ...Por cierto, también puede usar el mapa para obtener las fotos en JSX y omitir la función photoList, pero eso es solo una cuestión de opinión:
return ( <div> <button onClick={getData} className='inline-block px-4 py-3 text-sm font-semibold text-center text-white uppercase transition duration-200 ease-in-out bg-indigo-500 rounded-md cursor-pointer hover:bg-indigo-600'> Tailwind Button </button> <div className='flex flex-row mx-auto'> <ul> <li> {photos.map((elem) => { return <img className='img image-full' src={elem} />; })} </li> </ul> </div> </div> );