Блог

Я попытался деструктурировать только нужные мне реквизиты из состояния, используемого для хранения данных JSON, а затем использовать состояние для значения счетчика, чтобы у меня было несколько кнопок next/prev и одновременно отображалось только 1 изображение (используя в качестве индекса для массива значение счетчика, следовательно, это будет 1 элемент за раз, а кнопки next/prev будут увеличиваться/уменьшаться на 1 ). Я сделал это в предыдущем проекте, и это сработало, но по какой-то причине сейчас этого не происходит.

Есть какие-нибудь идеи, почему они не работают, или, возможно, какое-то представление о другом подходе ?

импортируйте React, { useEffect, useState } из «react»; импортируйте загрузку из «./загрузка»;

 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;