当使用 Ant Design 组件进行 form 表单查询，且
列表接口和
分页接口的
数据格式不一致
时，可以通过以下方法处理：
###
数据转换
在获取到接口
数据后，对
数据进行转换，使其符合组件的使用要求。例如，
列表接口返回的
数据可能包含一些多余的字段，或者字段名与 Table 组件需要的不一致，此
时可以对
数据进行筛选和重命名。
```
jsx
import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Table, Space } from 'antd';
// 模拟
列表接口，返回的
数据格式可能与组件需要的不一致
const fetch
ListData = async (params) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve([
{ itemId: 1, itemName: 'Item 1' },
{ itemId: 2, itemName: 'Item 2' },
]);
}, 500);
});
};
// 模拟
分页接口，返回的
数据格式可能与组件需要的不一致
const fetchPaginationData = async (params) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve({
totalCount: 10,
pageSize: 10,
currentPage: 1,
});
}, 500);
});
};
const columns = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
},
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
];
const App = () => {
const [form] = Form.useForm();
const [
listData, set
ListData] = useState([]);
const [pagination, setPagination] = useState({
total: 0,
pageSize: 10,
current: 1,
});
const onFinish = async (values) => {
const
listParams = { ...values, page: pagination.current,
pageSize: pagination.
pageSize };
const
listResult = await fetch
ListData(
listParams);
// 转换
列表数据格式
const transformed
ListData =
listResult.map(item => ({
id: item.itemId,
name: item.itemName,
}));
set
ListData(transformed
ListData);
const paginationParams = { ...values };
const paginationResult = await fetchPaginationData(paginationParams);
// 转换
分页数据格式
const transformedPagination = {
total: paginationResult.totalCount,
pageSize: paginationResult.
pageSize,
current: paginationResult.currentPage,
};
setPagination(transformedPagination);
};
const handleTableChange = async (newPagination) => {
const formValues = form.getFieldsValue();
const
listParams = { ...formValues, page: newPagination.current,
pageSize: newPagination.
pageSize };
const
listResult = await fetch
ListData(
listParams);
const transformed
ListData =
listResult.map(item => ({
id: item.itemId,
name: item.itemName,
}));
set
ListData(transformed
ListData);
const paginationParams = { ...formValues };
const paginationResult = await fetchPaginationData(paginationParams);
const transformedPagination = {
total: paginationResult.totalCount,
pageSize: paginationResult.
pageSize,
current: newPagination.current,
};
setPagination(transformedPagination);
};
return (
<div>
<Form
form={form}
name="searchForm"
onFinish={onFinish}
initialValues={{
keyword: '',
}}
layout="inline"
>
<Form.Item
name="keyword"
rules={[
{
required: false,
message: 'Please input your keyword!',
},
]}
>
<Input placeholder="Search keyword" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Search
</Button>
</Form.Item>
</Form>
<Table
columns={columns}
dataSource={
listData}
pagination={pagination}
onChange={handleTableChange}
/>
</div>
);
};
export default App;
```
### 封装
数据处理函数
将
数据转换的逻辑封装成独立的函数，提高代码的可维护性和复用性。
```
jsx
// 转换
列表数据的函数
const transform
ListData = (
listResult) => {
return
listResult.map(item => ({
id: item.itemId,
name: item.itemName,
}));
};
// 转换
分页数据的函数
const transformPaginationData = (paginationResult, currentPage) => {
return {
total: paginationResult.totalCount,
pageSize: paginationResult.
pageSize,
current: currentPage,
};
};
// 在 onFinish 和 handleTableChange 中使用封装的函数
const onFinish = async (values) => {
const
listParams = { ...values, page: pagination.current,
pageSize: pagination.
pageSize };
const
listResult = await fetch
ListData(
listParams);
const transformed
ListData = transform
ListData(
listResult);
set
ListData(transformed
ListData);
const paginationParams = { ...values };
const paginationResult = await fetchPaginationData(paginationParams);
const transformedPagination = transformPaginationData(paginationResult, pagination.current);
setPagination(transformedPagination);
};
const handleTableChange = async (newPagination) => {
const formValues = form.getFieldsValue();
const
listParams = { ...formValues, page: newPagination.current,
pageSize: newPagination.
pageSize };
const
listResult = await fetch
ListData(
listParams);
const transformed
ListData = transform
ListData(
listResult);
set
ListData(transformed
ListData);
const paginationParams = { ...formValues };
const paginationResult = await fetchPaginationData(paginationParams);
const transformedPagination = transformPaginationData(paginationResult, newPagination.current);
setPagination(transformedPagination);
};
```
### 错误处理
在
数据转换过程中，可能会出现一些错误，例如
数据格式不符合预期等，需要进行错误处理，避免程序崩溃。
```
jsx
const transform
ListData = (
listResult) => {
try {
return
listResult.map(item => ({
id: item.itemId,
name: item.itemName,
}));
} catch (error) {
console.error('Error transforming
list data:', error);
return [];
}
};
const transformPaginationData = (paginationResult, currentPage) => {
try {
return {
total: paginationResult.totalCount,
pageSize: paginationResult.
pageSize,
current: currentPage,
};
} catch (error) {
console.error('Error transforming pagination data:', error);
return {
total: 0,
pageSize: 10,
current: 1,
};
}
};
```
本文介绍了一种使用JavaScript初始化表格的方法，通过向表格中添加指定数量的行来实现。该方法可以根据每页显示的行数动态调整表格内容。
扫一扫
1810
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
