Reactjs 在React中显示json api中的列表

如何在此API中显示标题、图像和变体\u设置价格
GET/api/products/？format=api
HTTP 200 OK
允许：获取、头部、选项
内容类型：application/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",
“id”：2，
“标题”：“iPhone封面”，
“图像”：“/media/products/iphone-cover/iphone-cover-2_8x7c3td.jpg”，
“变量集”：[
{
“id”：6，
“标题”：“默认值”，
“价格”：“29.99”
}
]
}
]
}GET/api/products/？format=api
HTTP 200 OK
允许：获取、头部、选项
内容类型：application/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",
“id”：2，
“标题”：“iPhone封面”，
“图像”：“/media/products/iphone-cover/iphone-cover-2_8x7c3td.jpg”，
“变量集”：[
{
“id”：6，
“标题”：“默认值”，
“价格”：“29.99”
}
]
}
]
}

我将导入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})

    })
}

---

像这样的。您还必须包含图像。

嗯，您的问题我不太清楚，但如果我是对的，您希望显示从API获取的一些数据

如何获取数据？

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

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

您可以阅读更多关于fetch的信息

之后，您将把所有查询的数据放在一个变量中的某个位置。要显示适当的字段，可以迭代前面提到的变量

示例

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
         ...
      }
   });

---

我不知道你的确切结构，但类似上面的东西应该能解决你的问题。如果你能附上一些屏幕截图，那就太好了。

你必须向我们展示你的代码，你已经尝试过了。谢谢你，但我遭到了未经处理的拒绝（TypeError）：无法读取未定义的属性“variation\u set”，你能检查我的代码吗。我收到未经处理的拒绝（TypeError）：无法读取未定义的属性“variation\u set”，请检查我的代码。您应该注销axios请求中的响应数据内容。消息表示上下文中不存在结果字段。