在 React 中显示来自 json api 的列表

Question

 how to display title, image and Variation_set price in react from this API

GET /api/products/?format=api
HTTP 200 OK
Allow: GET, HEAD, OPTIONS
Content-Type: application/json
Vary: Accept

{
    "count": 6,
    "next": "http://127.0.0.1:8000/api/products/?format=api&limit=1&offset=1",
    "previous": null,
    "results": [
        {
            "url": "http://127.0.0.1:8000/api/products/2/?format=api",
            "id": 2,
            "title": "iPhone Cover",
            "image": "/media/products/iphone-cover/iphone-cover-2_8x7c3td.jpg",
            "variation_set": [
                {
                    "id": 6,
                    "title": "Default",
                    "price": "29.99"
                }
            ]
        }
    ]
}GET /api/products/?format=api
HTTP 200 OK
Allow: GET, HEAD, OPTIONS
Content-Type: application/json
Vary: Accept

{
    "count": 6,
    "next": "http://127.0.0.1:8000/api/products/?format=api&limit=1&offset=1",
    "previous": null,
    "results": [
        {
            "url": "http://127.0.0.1:8000/api/products/2/?format=api",
            "id": 2,
            "title": "iPhone Cover",
            "image": "/media/products/iphone-cover/iphone-cover-2_8x7c3td.jpg",
            "variation_set": [
                {
                    "id": 6,
                    "title": "Default",
                    "price": "29.99"
                }
            ]
        }
    ]
}

如何在这个 API 的反应中显示标题、图片和 Variation_set 价格

GET /api/products/?format=api HTTP 200 正常 允许：GET、HEAD、OPTIONS 内容类型：应用程序/json 变化：接受

{ “计数”：6， "下一个": "http://127.0.0.1:8000/api/products/?format=api&limit=1&offset=1", “上一个”：空， “结果”： [ { "url": "http://127.0.0.1:8000/api/products/2/?format=api", “身份证”：2， "title": "iPhone 封面", "图片": "/media/products/iphone-cover/iphone-cover-2_8x7c3td.jpg", “变体集”：[ { “身份证”：6， "title": "默认", “价格”：“29.99” } ] } ] }GET /api/products/?format=api HTTP 200 正常 允许：GET、HEAD、OPTIONS 内容类型：应用程序/json 变化：接受

{ “计数”：6， "下一个": "http://127.0.0.1:8000/api/products/?format=api&limit=1&offset=1", “上一个”：空， “结果”： [ { "url": "http://127.0.0.1:8000/api/products/2/?format=api", “身份证”：2， "title": "iPhone 封面", "图片": "/media/products/iphone-cover/iphone-cover-2_8x7c3td.jpg", “变体集”：[ { “身份证”：6， "title": "默认", “价格”：“29.99” } ] } ] }

Answer 1

我会导入 Axios，然后：

getPrices() {
    axios.get('/api/products/?format=api', {
    headers:
        'Accept'        : 'application/json',
        'Content-Type'  : 'application/json;charset=UTF-8'

    }).then(res => {
        let values = res.results.variation_set.map((item) => {return {
            title   :   item.title
            price   :   item.price
        }});

        this.setState({prices : values})

    })
}

类似的东西。而且你还必须包含图片。

Answer 2

嗯，你的问题对我来说不是很清楚，但如果我是对的，你想显示一些你从 API 获取的数据。

如何获取数据？

有几种方法可以获取数据，例如通过使用 JavaScript 中内置的 fetch 方法，或者您甚至可以查看 axios。

我喜欢这两个，但我更喜欢使用内置的。那是因为您不必安装它及其相关的依赖项。

你可以阅读更多关于 fetch here.

之后，您会将所有查询的数据保存在变量中的某个位置。要显示适当的字段，您可以迭代上述变量。

示例

fetch('/api/products/?format=api')
   .then((res) => res.json())
   .then((data) => {
      for (let someKey in data.results) {
         // data.results, because that contains the fields you asked for
         ...
      }
   });

我不知道您的确切结构，但与上述类似的东西应该可以解决您的问题。如果能附上截图就好了。