Question

我正在尝试使用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>
)

Answer 1

您实际上是在使用gifLinks将{ gifLinks: gifLinks.data[0].url }设置为setGifLinks，所以最终得到一个对象是有意义的，因为这就是您要为其设置的内容。 / p>

您赋予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钩子显示来自Giphy API的GIF

3 个答案: