React JS Таблица рендерит только часть данных (колонок)

Question

Небольшой проект .Net Core Web API + React JS + Typescript + antd.

Бекенд готов и корректно отдаёт данные (гонял на сваггере).

На фронтенд данные приходят полностью.

В таблице отображаются только 3 колонки из 7.

Код

"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 но её видно.

Answer 1

Попробуйте поправить:

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

БЛОГ НА HUSL

React JS Таблица рендерит только часть данных (колонок)

Ответы (1 шт):