Intenté desestructurar solo los accesorios que quería del estado utilizado para almacenar los datos JSON, y luego usé un estado para un valor de contador para poder tener algunos botones siguiente/anterior y mostrar solo 1 imagen a la vez (usando como índice para la matriz, el valor del contador, por lo tanto, sería 1 elemento a la vez y los botones siguiente/anterior aumentarían/disminuirían en 1). Hice esto en un proyecto anterior y funcionó, pero por alguna razón ahora no funciona.

¿Alguna idea de por qué no funciona, o tal vez alguna idea para un enfoque diferente?

import React, { useEffect, useState } from "react"; importar Cargando desde "./loading";

 const key = "#!$!#$!#$#!$!#$#!#$!$#!$!#$!$#!$"; const url = `https://api.unsplash.com/photos/?client_id=${key}`; console.log(url); //main Component function App() { //states const [loading, setLoading] = useState(true); const [images, setImages] = useState([]); const [counter, setCounter] = useState(0); const fetchImages = async () => { setLoading(true); try { const response = await fetch(url); const image = await response.json(); setLoading(false); setImages(image); } catch (error) { console.log(error); setLoading(true); } }; useEffect(() => { fetchImages(); }, [url]); //loading if (loading) { return ( <main> <Loading></Loading> </main> ); } //primary return const { id, created_at, description, urls } = images[counter]; return ( <main> {urls.map((image) => { return <img src={image.full}></img>; })} </main> ); } export default App;