1

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

3 回答 3

0

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

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

于 2019-10-17T07:34:14.740 回答
0

这

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

应该

setGifLinks(gifLinks.data[0].url)
于 2019-10-17T07:37:07.933 回答
0

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

// ...

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" />
于 2019-10-17T07:43:08.427 回答