尝试使用 React hooks 显示来自 Giphy API 的 GIF

Question

我正在尝试使用 Giphy API 获取 GIF 并使用 React 挂钩将其显示在页面上。它正在获取一个对象而不是 url，因此所有页面显示的都是叶子徽标。

我已经尝试将状态设置为 GIF url（如代码所示），但它仍然是对象。我尝试在 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>
)

Answer 1

您实际上是使用 setGifLinks 将 gifLinks 设置为 { gifLinks: gifLinks.data[0].url }，因此您最终得到一个对象是有道理的，因为这就是您将其设置的内容.

你给 setGifLinks 函数的值将是它的新值所以如果你只是想让它成为 url 做 setGifLinks(gifLinks.data[0].url).

Answer 2

这个

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

应该是

setGifLinks(gifLinks.data[0].url)

Answer 3

以下解决方案将为您完成工作，只需在这两行中进行如下更改：

// ...

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" />

尝试使用 React hooks 显示来自 Giphy API 的 GIF

Trying to display a GIF from Giphy API using React hooks

javascript

reactjs

giphy-api

react-hooks