Javascript 尝试使用React钩子显示giphyapi中的GIF

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

导出默认函数组合（）{
常量[gifLinks，setGifLinks]=useState（[]）
useffect（（）=>{
让url=”https://api.giphy.com/v1/gifs/search?api_key=My_Api_Key&q=kittens&limit=1";
获取（url）
。然后（response=>response.json（））。然后（gifLinks=>{
console.log（gifLinks）；
设置链接({
gifLinks:gifLinks.data[0]。url
})
})
}, [])
返回(
)

您使用

setGifLinks

将

gifLinks

设置为

{gifLinks:gifLinks.data[0].url}

，因此您最终得到一个对象是有意义的，因为这就是您要设置的对象

---

您为

setGifLinks

函数提供的是它的新值，因此如果您只想让它成为url，请执行

setGifLinks（gifLinks.data[0].url）

实际上是将

gifLinks

设置为

{gifLinks:gifLinks.data[0].url}

使用

setGifLinks

，因此最终得到一个对象是有意义的，因为这就是您要设置的对象

您为

setGifLinks

函数提供的将是它的新值，因此如果您只希望它成为url，请执行

setGifLinks（gifLinks.data[0].url）

此操作

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

应该是

setGifLinks(gifLinks.data[0].url)

这个

应该是

setGifLinks(gifLinks.data[0].url)

---

以下解决方案将为您提供此项工作，只需在以下两行中进行更改：

// ...

const [gifLinks, setGifLinks] = useState({});

// ...

<img src={gifLinks.gifLinks} alt="gif" />

// ...

因此，您可以参考以下内容：

<img src={gifLinks.url} alt="gif" />

---

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

// ...

const [gifLinks, setGifLinks] = useState({});

// ...

<img src={gifLinks.gifLinks} alt="gif" />

// ...

因此，您可以参考以下内容：

<img src={gifLinks.url} alt="gif" />

我尝试了这个，但仍然没有结果。当我控制台记录gifLinks.url时，它显示为未定义。另外，现在有一个CORB错误。我尝试了这个，但仍然没有结果。当我控制台记录gifLinks.url时，它显示为未定义。另外，现在有一个CORB错误。看起来这应该可以工作了（尽管控制台日志记录gifLinks仍然显示为对象，尽管检查显示src为链接），但存在CORB错误。编辑上一条注释：它有效，必须更改属性路径，我使用的是错误的路径。它实际上是“gifLinks.data[0].images.fixed_height.url”。哇！这似乎应该有效（尽管控制台日志记录gifLinks仍然显示为对象，尽管检查显示src为链接），但存在CORB错误。编辑上一条评论：成功了，必须更改属性路径，我使用的是错误的路径。它实际上是“gifLinks.data[0].images.fixed_height.url”。哇！