拓展实践 - 1

[aspirantzhang]

本节学习手册：https://www.yuque.com/aspirantzhang/antdprov5/rfo72u

本节代码
a9a64fe?diff=split

请发与本节课有关的讨论。

[zhaochaofight]

老师：我data.d.ts TableColumn 已经定义是 sorter?: boolean; 是可选的 ， table 开始加id 的时候 新增sorter 为true 时候 idColumn.concat(newColumns); newColumns还是会 提示 下面错误：
第 1 个重载(共 2 个)，“(...items: ConcatArray<{ title: string; dataIndex: string; key: string; sorter: boolean; }>[]): { title: string; dataIndex: string; key: string; sorter: boolean; }[]”，出现以下错误。
类型“TableColumn[]”的参数不能赋给类型“ConcatArray<{ title: string; dataIndex: string; key: string; sorter: boolean; }>”的参数。
在这些类型中，"slice(...)" 返回的类型不兼容。
不能将类型“TableColumn[]”分配给类型“{ title: string; dataIndex: string; key: string; sorter: boolean; }[]”。
不能将类型“TableColumn”分配给类型“{ title: string; dataIndex: string; key: string; sorter: boolean; }”。
然后 我把 data.d.ts TableColumn 的改为 sorter: boolean; 就不提示ts 报错了啥原因导致的

[aspirantzhang]

这个肯定类型定义没有写好，注意和课程中的代码对比一下。

const newColumns: BasicListApi.TableColumn[] = [];

const idColumn: BasicListApi.TableColumn[] = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      sorter: true,
    },
  ];

[zhaochaofight]

我大意了，知道啥问题了

[lensv]

老师，能够麻烦您解释一下这段代码嘛

const tableChangeHandler = (_: any, __: any, sorter: any) => {
if (sorter.order === undefined) {
setSortQuery('');
} else {
const orderBy = sorter.order === 'ascend' ? 'asc' : 'desc';
setSortQuery(&sort=${sorter.field}&order=${orderBy});
}
};

sorter.order 是哪里的值呢

[aspirantzhang]

由于这块就是要做筛选，所以先查文档，找到table组件控制筛选的属性
https://ant.design/components/table-cn/#API
发现控制筛选的属性是onChange，它是个函数
然后就用它进行测试，发现在进行筛选时，这个函数第三个参数sorter有变化，它里面的order有undefined/ascend/descend三种情况
当是undefined时，说明不需要筛选，所以 setSortQuery('');
如果order=ascend时，要给后端传的字符串是 asc，否则是 desc，所以还要处理一下
sorter.order === 'ascend' ? 'asc' : 'desc'

[lensv]

老师，在前端是如何进行测试的呢，是用consolo.log打出来吗

[aspirantzhang]

是的，由于文档中也没有特别说明，就只能咱们自己用console.log来测，最终测出了三种情况。

[lensv]

嗯嗯，好的，谢谢老师！！！

[jss-less-step]

张老师您好，我在这一章里面写列表排序的时候出了一个问题。在编写Table标签的onChange这个回调函数的时候，我在函数体内输出sorter.order的值，当我点击列表头时，这个order的值可以正常输出，分别为 descend，ascend，undefined。但是当我在onChange函数里面尝试根据sorter.order的值更新state里面的sortQuery时就出问题了，这时sorter.order的值就只有两种可能了，就是descend 和 assend，没有undefined了。

我在onChange函数里面输出了sorter.order，控制台的输出：

这是我的onChange函数：

[aspirantzhang]

🤣

[jss-less-step]

🤣
果然老师说的对，前期还是不能自己乱改。。。今天想了一下午没想明白问题出在哪里了QAQ

[jss-less-step]

🤣

张老师，这个我思考了一下，还是没有搞清楚这个里面的逻辑，我尝试不监控sortQuery的变化（和你的代码唯一的区别就是把Table组件封装在一个叫做TableLayout的自定义组件中），当时的目的是希望代码更清晰一些，但是出现了这样的bug，你能看看为啥会出现这样的问题么？
import { Table, Pagination, Card, Row, Col, Space } from 'antd'; import { PageContainer } from '@ant-design/pro-layout'; import styles from './index.less'; import { useRequest } from 'umi'; import { useState, useEffect } from 'react'; import { BaseUrl } from './constant'; import columnBuilder from './builder/ColumnBuilder'; import actionBuilder from './builder/ActionBuilder'; function BasicList() { console.log(1); /** * 使用state hook 在state中存入两个参数page，per_page */ const [page, setPage] = useState(1); const [per_page, setPer_page] = useState(10); const [sortQuery, setSortQuery] = useState(''); /** * 发送网络请求，获取数据内容 * 这里useRequest的泛型是指定返回数据的类型 */ const init = useRequest<{ data: BasicListApi.Data }>( ${BaseUrl}&page=${page}&per_page=${per_page}${sortQuery}`,
);
/**
* 异步hook，监听page和per_page和sortQuery的修改,一旦发生改变，就调用init.run方法重新发送请求
*/
useEffect(() => {
init.run();
}, [page, per_page]); //eslint-disable-line react-hooks/exhaustive-deps

/**
 * 获取到后端返回的columns
 */
const columns = init?.data?.layout?.tableColumn || [];
const actionsInTableToolBar = init?.data?.layout.tableToolBar || [];

/**
 *
 * @param _page
 * @param _pageSize
 */
const onPaginationChangeHandler = (_page: any, _pageSize: any) => {
    //这里useState是一个异步函数，也就是说state的修改时异步的
    setPage(_page);
    setPer_page(_pageSize);
};

/**
 *
 * @param {}
 * @param {}
 * @param sorter
 */

/**
 *
 * 子组件（Table前的）
 */
const BeforeTableLayout = () => {
    return (
        <Row>
            <Col xs={24} sm={12}>
                <span>BasicList</span>
            </Col>
            <Col xs={24} sm={12} className={styles.tableToolbar}>
                <Space>{actionBuilder(actionsInTableToolBar)}</Space>
            </Col>
        </Row>
    );
};

/**
 *
 * 子组件（Table）
 */
const TableLayout = () => {
    console.log(2);
    const onTableChangeHandler = ({}, {}, sorter: any) => {
        console.log('sorter.order', sorter.order);
        if (sorter.order === undefined) {
            setSortQuery('');
        } else {
            const orderBy = sorter.order === 'ascend' ? 'asc' : 'desc';
            setSortQuery(`&sort=${sorter.field}&order=${orderBy}`);
        }
    };
    return (
        <Table
            loading={init.loading}
            dataSource={init?.data?.dataSource}
            //调用./builder/columnBuilder来对columns进行一些处理
            columns={columnBuilder(columns)} //因为concat必须传入一个数组（且不能为undefined）如果columus如何为undefined的话就传入空数组
            pagination={false}
            rowKey={'id'}
            onChange={onTableChangeHandler}
        />
    );
};

/**
 *
 * 子组件（Table后的）
 */
const AfterTableLayout = () => {
    return (
        <Row>
            <Col xs={24} sm={24} className={styles.tablePagination}>
                <Pagination
                    total={init.data?.meta.total || 0}
                    current={init.data?.meta.page || 1}
                    pageSize={init.data?.meta.per_page || 10}
                    showSizeChanger
                    showQuickJumper
                    showTotal={(total) => `Total ${total} items`}
                    //这里变量命名在前面加个下划线
                    onChange={onPaginationChangeHandler}
                />
            </Col>
        </Row>
    );
};

/**
 * BasicList组件内容
 */
return (
    <PageContainer>
        <Card>
            <BeforeTableLayout />
            <TableLayout />
            <AfterTableLayout />
        </Card>
    </PageContainer>
);

}

export default BasicList;`

[aspirantzhang]

我一会研究一下，你先继续往下看课程吧，不要在此处花费太多时间。

[jss-less-step]

我一会研究一下，你先继续往下看课程吧，不要在此处花费太多时间。

好的，谢谢张老师。

[pengjie-chen]

如果只是处理id的排序可参考一下代码，就是createtime排序不知道怎么实现 ，我以为老师的代码会有这块

const idColumn = [{
title: 'ID',
dataIndex: 'id',
key: 'id',
sorter: {
compare: (a:BasicListApi.Datum, b:BasicListApi.Datum) => a.id - b.id,
multiple: 1,
}
}]