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

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

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

应该是

setGifLinks(gifLinks.data[0].url)

Answer 2

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

您提供给setGifLinks函数的将是它的新值，因此，如果您只想将其作为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" />