小项目.Net Core Web API
+++ 。React JS
Typescript
antd
后端已准备就绪并正确返回数据(我在 Swagger 上运行它)。
代码
"use client"
import { Table } from "antd";
import { getAllOrders } from "@/app/Services/service";
import { Order } from "@/app/Models/Order";
import { useEffect, useState } from "react";
const columns = [
{
title: 'N',
dataIndex: 'n',
key: 'n',
},
{
title: 'Uniq Id',
dataIndex: 'uniqid',
key: 'uniqid',
},
{
title: 'City From',
dataIndex: 'cityfrom',
key: 'cityfrom',
},
{
title: 'Adress From',
dataIndex: 'adressfrom',
key: 'adressfrom',
},
{
title: 'City To',
dataIndex: 'cityto',
key: 'cityto',
},
{
title: 'Adress To',
dataIndex: 'adressto',
key: 'adressto',
},
{
title: 'Weight',
dataIndex: 'weight',
key: 'weight',
},
{
title: 'Date',
dataIndex: 'date',
key: 'date',
}
]
export default function AllOrders() {
const [orders, setOrders] = useState<Order[]>([]);
useEffect(() => {
const getOrders = async () => {
const responce = await getAllOrders();
setOrders(responce);
console.log('orders_from_responce: ', responce);
};
getOrders();
}, []);
const data = orders.map((order, index) => ({
key: index,
n: (index+1),
uniqid: order.id,
cityfrom: order.cityfrom,
adressfrom: order.adressfrom,
cityto: order.cityto,
adressto: order.adressto,
weight: order.weight,
date: order.date
}))
return (
<div >
<h1>Все заказы</h1>
<Table
dataSource={data}
columns={columns}
pagination={false}
footer={() => ""}
bordered
/>
</div >
);
}
数据模型是Order
:
export interface Order {
id: string;
cityfrom: string;
adressfrom: string;
cityto: string;
adressto: string;
weight: number,
date: Date,
specialnote: string
}
该模型用于此生产线const [orders, setOrders] = useState<Order[]>([]);
。数据与模型相符。
4 列类型未显示string
,因此我认为问题出在数据类型不匹配。同时,id
(uuid
)列string
也可见。