尝试使用 React 钩子从 Giphy API 显示 GIF答案

【问题标题】：Trying to display a GIF from Giphy API using React hooks尝试使用 React 钩子从 Giphy API 显示 GIF
【发布时间】：2020-02-14 01:03:40
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs react-hooks giphy-api

【解决方案1】：

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

// ...

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

【讨论】：

我试过了，还是没有。当我控制台记录 gifLinks.url 时，它显示为未定义。另外，现在还有一个 CORB 错误。

【解决方案2】：

这个

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

应该是

setGifLinks(gifLinks.data[0].url)

【讨论】：

这似乎应该可以工作（尽管控制台日志记录 gifLinks 仍然显示为一个对象，尽管检查显示 src 作为链接）但是有一个 CORB 错误。
编辑上一条评论：它有效，必须更改属性路径，我使用的是错误的路径。它实际上是“gifLinks.data[0].images.fixed_height.url”。哎呀！

【解决方案3】：

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

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

【讨论】：