javascript - 尝试使用React Hook 从Giphy API显示GIF

我正在尝试使用Giphy API获取GIF，并使用React挂钩将其显示在页面上。它获取的是对象而不是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>
)

最佳答案

这个

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

应该

setGifLinks(gifLinks.data[0].url)