🐛 [BUG] ProTable does not populate table after request

[mkalinski93]

🐛 bug 描述

After ProTable has got data from a request, the loading state disappear but no data is listed in the Table. The table remains empty, even though items has been loaded.

📷 复现步骤 | Recurrence steps

//see recurrence code

🏞 期望结果 | Expected results

Populated table

💻 复现代码 | Recurrence code

Component

import React, {useRef} from 'react';
import {TablePaginationConfig} from "antd";
import {WeatherForecast} from "@/services/test/typings";
import {ActionType, ProColumns, ProTable} from "@ant-design/pro-components";
import {OptionConfig} from "@ant-design/pro-table/lib/components/ToolBar";
import * as WeatherService from "@/services/test/weatherService";
import {ColumnStateType} from "@ant-design/pro-table/lib/typing";

const WeatherDisplay: React.FC = () => {

  const actionRef = useRef<ActionType>();

  const columnState: ColumnStateType = {
    persistenceKey: 'pro-table-singe-demos',
    persistenceType: 'localStorage',
    onChange(value) {
      console.log('value: ', value);
    }
  }

  const paginationOptions: TablePaginationConfig = {
    pageSizeOptions: ["25", "50", "100", "250"]
  };

  const scrollOptions = {
    scrollToFirstRowOnChange: true,
    y: 800
  }

  const proColumns: ProColumns<WeatherForecast>[] = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: "Key",
      dataIndex: "key",
      width: 'auto',
      key: "key"
    },
    {
      title: "Date",
      dataIndex: "date",
      width: 'auto'
    },
    {
      title: "Temperature C",
      dataIndex: "temperatureC",
      width: 'auto'
    },
    {
      title: "Temperature F",
      dataIndex: "temperatureF",
      width: 'auto'
    },
    {
      title: "Summary",
      dataIndex: "summary",
      width: 'auto'
    }
  ];

  const proOptions: OptionConfig = {
    fullScreen: true,
    reload: true,
    setting: true,
    density: true,
    search: true
  };

  const request = async (params:any, sort:any, filter:any) => {
    return await WeatherService.getWeatherForecastsAsync();
  }

  const onRequestError = (e: Error) => {
    console.log(e);
  }

  return (
    <ProTable<WeatherForecast, {}>
      columnsState={columnState}
      actionRef={actionRef}
      rowKey="key"
      onRequestError={onRequestError}
      request={request}
      columns={proColumns}
      options={proOptions}
      pagination={paginationOptions}
      scroll={scrollOptions}/>
  )
}

export default WeatherDisplay;

Type

export interface WeatherForecast {
    key: string,
    date: string,
    temperatureC: number,
    temperatureF: number,
    summary: string
}

Service

import {request} from "@umijs/max";
import {WeatherForecast} from "@/services/test/typings";

/**
 * Retrieves weather forecasts asynchronously from the server.
 * @returns {Promise<WeatherForecast[]>} A Promise that resolves to an array of WeatherForecast objects.
 */
export async function getWeatherForecastsAsync() : Promise<WeatherForecast[]>{
  return request<WeatherForecast[]>('/api/weatherforecast', {
    method: 'GET'
  });
}

https://github.com/ant-design/ant-design-pro/assets/64005967/8fe891b3-104b-4b61-8b3e-b7d0c11b5ecf

© 版本信息

🚑 其他信息