如何使用 React.js 映射 GET 方法响应

Question

此代码returns：类型错误：data.map 不是函数，位于 Orders.js:18

我将此组件导入我的 app.js 并使用它从 OData 服务器获取数据。

import React, {Component} from 'react'
import axios from 'axios'

export default class Orders extends Component {
    constructor(props) {
        super(props);
        
        this.state = {
            Orders: []
        };
    }
    getOrdersData() {
        axios
            .get(`Orders`, {})
            .then(res => {
                const data = res.data
                console.log(data)
                const Orders = data.map(u =>
                    <div>
                    <p>{u.CustomerId}</p>
                    
                    </div>
                    )

                    this.setState({
                        Orders
                    })

            })
            .catch((error) => {
                console.log(error)
            })

    }
    componentDidMount(){
        this.getOrdersData()
    }
    render() {

        return (
            <div>
                {this.state.Orders}
            </div>
        )
    }
}

返回的响应在控制台上看起来像这样：

{d: {…}}
d:
results: Array(200)
[0 … 99]
0:
Customer: {__deferred: {…}}
CustomerID: "DOGA"
Employee: {__deferred: {…}}
EmployeeID: 2
Freight: "56.234"
OrderDate: "/Date(836438400000)/"
OrderID: 12345
Order_Details: {__deferred: {…}}
RequiredDate: "/Date(838857600000)/"

我想创建一个 table 并通过它们的 orderId 将这些结果映射到 table。

这是来自API的部分回复：

{
"d" : {
"results": [
{
"__metadata": {
"uri": "https://services.odata.org/V2/northwind/Northwind.svc/Orders(10248)", "type": "NorthwindModel.Order"
}, "OrderID": 10248, "CustomerID": "VINET", "EmployeeID": 5, "OrderDate": "\/Date(836438400000)\/", "RequiredDate": "\/Date(838857600000)\/", "ShippedDate": "\/Date(837475200000)\/", "ShipVia": 3, "Freight": "32.3800", "ShipName": "Vins et alcools Chevalier", "ShipAddress": "59 rue de l'Abbaye", "ShipCity": "Reims", "ShipRegion": null, "ShipPostalCode": "51100", "ShipCountry": "France", "Customer": {
"__deferred": {
"uri": "https://services.odata.org/V2/northwind/Northwind.svc/Orders(10248)/Customer"
}
}, "Employee": {
"__deferred": {
"uri": "https://services.odata.org/V2/northwind/Northwind.svc/Orders(10248)/Employee"
}
}, "Order_Details": {
"__deferred": {
"uri": "https://services.odata.org/V2/northwind/Northwind.svc/Orders(10248)/Order_Details"
}
}, "Shipper": {
"__deferred": {
"uri": "https://services.odata.org/V2/northwind/Northwind.svc/Orders(10248)/Shipper"
}
}
}, {

Answer 1

那是因为您正在尝试映射对象。

.map()是数组方法

也许您想遍历 results 数组 (data.results)？

如何使用 React.js 映射 GET 方法响应

How to map over an GET method response with React.js

javascript

odata

reactjs

axios