Попытка отобразить GIF из Giphy API с помощью перехватчиков React - PullRequest
Новая
       40

Попытка отобразить GIF из Giphy API с помощью перехватчиков React

1 голос
/ 17 октября 2019

Я пытаюсь получить GIF с помощью Giphy API и отобразить его на странице с помощью перехватчиков React. Он выбирает объект, а не URL, поэтому на всех страницах отображается логотип листа.

Я попытался установить состояние для URL GIF (как показано в коде), но оно все еще остается в качестве объекта. Я попытался установить путь к свойствам в src, но он не позволяет мне переходить к свойствам. 

export default function Portfolio() {

   const [gifLinks, setGifLinks] = useState([])

   useEffect(() => {
        let url = "https://api.giphy.com/v1/gifs/search?api_key=My_Api_Key&q=kittens&limit=1";

        fetch(url)
            .then(response => response.json()).then(gifLinks => {
                console.log(gifLinks);
                setGifLinks({
                    gifLinks: gifLinks.data[0].url
                })
            })
    }, [])

return (
   <div>
      <img src={gifLinks} alt="gif" />
   </div>
)

Ответы [ 3 ]

0 голосов
/ 17 октября 2019

Это 

setGifLinks({
                    gifLinks: gifLinks.data[0].url
                })

должно быть 

setGifLinks(gifLinks.data[0].url)
0 голосов
/ 17 октября 2019

Следующее решение сделает работу за вас, просто внесите изменения, как показано ниже в этих двух строках: 

// ...

const [gifLinks, setGifLinks] = useState({});

// ...

<img src={gifLinks.gifLinks} alt="gif" />

// ...

Кроме того, было бы неплохо найти более подходящее наименование для свойства. Технически вы используете gifLinks.gifLinks в своем коде, если вы используете вышеуказанный подход. Позвольте мне предложить следующее: 

const [gifLinks, setGifLinks] = useState({});

// ... 

.then(response => response.json()).then(gifLinks => {
   setGifLinks({
      url: gifLinks.data[0].url
   });
});

Так что вы можете сослаться на следующее: 

<img src={gifLinks.url} alt="gif" />
0 голосов
/ 17 октября 2019

Вы буквально устанавливаете gifLinks на { gifLinks: gifLinks.data[0].url }, используя setGifLinks, поэтому имеет смысл, что вы в конечном итоге получите объект, потому что это то, что вы устанавливаете.

Чтовы даете функции setGifLinks новое значение, поэтому, если вы просто хотите, чтобы она была URL-адресом, сделайте setGifLinks(gifLinks.data[0].url).

...