主页 / 问题 / 1610175
Accepted
Garp
Asked:2025-04-10 14:20:05 +0000 UTC2025-04-10 14:20:05 +0000 UTC

React JS Table 仅渲染部分数据（列）

  • 772

小项目.Net Core Web API+++ 。React JS​Typescriptantd

后端已准备就绪并正确返回数据（我在 Swagger 上运行它）。

数据完整到达前端。 在此处输入图片描述

该表仅显示 7 列中的 3 列。 在此处输入图片描述

代码

"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也可见。

reactjs

1 个回答

  1. Best Answer

    尝试修复它：

    const columns = [
    // ...
    {
        title: 'Adress From',
        dataIndex: 'adressFrom', // Было adressfrom
        key: 'adressFrom',
    },
    {
        title: 'Adress To',
        dataIndex: 'adressTo',  // Было adressto
        key: 'adressTo',
    },
    // ... 
];

    和

    const data = orders.map((order, index) => ({
    key: index,
    n: (index + 1),
    uniqid: order.id,
    cityfrom: order.cityFrom,
    //...
}));

    我建议使用useMemo类似的东西：

    export default function AllOrders() {
    const [orders, setOrders] = useState<Order[]>([]);

    useEffect(() => {
        const controller = new AbortController();

        const getOrders = async () => {
            try {
                 const response = await getAllOrders({ signal: controller.signal });
                 setOrders(response);
                 console.log('orders_from_response: ', response);
             } catch (error) {
                 if (!controller.signal.aborted) {
                     console.error("Ошибка загрузки:", error);
                 }
             }
        };

        getOrders();

        return () => controller.abort();
    }, []);

    const data = useMemo(() => 
        orders.map((order, index) => ({
            key: index,
             n: index + 1,
             uniqid: order.id,
             cityfrom: order.cityfrom,
             adressfrom: order.addressFrom,
             cityto: order.cityto,
             adressto: order.addressTo,
             weight: order.weight,
             date: order.date
        })), [orders]);

    return (
        <div>
            <h1>Все заказы</h1>
            <Table
                dataSource={data}
                columns={columns}
                pagination={false}
                footer={() => ""}
                bordered
            />
        </div>
     );
}
    • 1

相关问题