json 我不能得到我的狗API可以有人请帮助吗？我是react的新手，无论我做什么都没有帮助,图片不会出现在屏幕上[关闭]

jum4pzuy 于 2023-06-07 发布在 React

关注(0)|答案(2)|浏览(587)

**关闭。**此题需要debugging details。目前不接受答复。

编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将帮助其他人回答这个问题。
4天前关闭。
Improve this question

import React, { useState } from 'react'
import './App.css'

function Dog(data) {
    const [url, setUrl] = useState('')

    function fecth_data() {
        fetch('https://dog.ceo/api/breeds/image/random')
            .then((res) => res.json())
            .then((data) => setUrl(data))
        console.log(data)
    }
    return (
        <div className="dog-main">
            <img src={url} className="dog-random" alt="a dog" />
            <button className="dog-btn" onClick={fecth_data}>
                {' '}
                Generate!{' '}
            </button>
        </div>
    )
}

export default Dog

我不能得到我的狗API可以有人请帮助吗？我是新的React，无论我做什么，它没有帮助。画面不会出现在屏幕上

JSON

来源：https://stackoverflow.com/questions/76370700/i-cannot-fetch-my-dog-api-can-someone-please-help-i-am-new-at-react-whatever-i

2条答案

按热度按时间

yqlxgs2m1#

你的API端点返回了一个json对象，它的键是message和status，你将src设置为这个值，而<url>标签并不理解。它需要一个字符串，因此您可以获取该返回对象并将url设置为返回的data.message。

import React, { useState } from 'react'

function Dog(data) {
    const [url, setUrl] = useState('')

    function fetch_data() {
        fetch('https://dog.ceo/api/breeds/image/random')
            .then((res) => res.json())
            .then((data) => {
        console.log(data)
              setUrl(data.message)
            })
    }
    return (
        <div className="dog-main">
            <img src={url} className="dog-random" alt="a dog" />
            <button className="dog-btn" onClick={fetch_data}>
                Generate!
            </button>
        </div>
    )
}

export default Dog

赞(0）回复(0）举报 2023-06-07

0ve6wy6x2#

你需要在useEffect中调用fecth_data（）。

useEffect(() => {
    fecth_data()
  }, [])

赞(0）回复(0）举报 2023-06-07

我来回答

json 我不能得到我的狗API可以有人请帮助吗？我是react的新手，无论我做什么都没有帮助,图片不会出现在屏幕上[关闭]

2条答案

相关问题

热门标签

最新问答