react的ProTable

request 是 ProTable 最重要的 API，request 会接收一个对象。对象中必须有 data 和 success，如果需要手动分页 total 也是必需的。request 会接管 loading 的设置，同时在查询表单查询时和 params 参数发生修改时重新执行。同时 查询表单的值和 params 参数也会带入。

<ProTable<DataType, Params>
  // params 是需要自带的参数
  // 这个参数优先级更高，会覆盖查询表单的参数
  params={params}
  request={async (
    // 第一个参数 params 查询表单和 params 参数的结合
    // 第一个参数中一定会有 pageSize 和  current ，这两个参数是 antd 的规范
    params: T & {
      pageSize: number;
      current: number;
    },
    sort,
    filter,
  ) => {
    // 这里需要返回一个 Promise,在返回之前你可以进行数据转化
    // 如果需要转化参数可以在这里进行修改
    const msg = await myQuery({
      page: params.current,
      pageSize: params.pageSize,
    });
    return {
      data: msg.result,
      // success 请返回 true，
      // 不然 table 会停止解析数据，即使有数据
      success: boolean,
      // 不传会使用 data 的长度，如果是分页一定要传
      total: number,
    };
  }}
/>

下面是实例：

       需要注意的是，在表单查询和 params 参数发生修改时重新执行request请求，其他情况，增删改查调用接口后，需要用actionRef  来触发更新，再次调用request 请求。 

       调用 actionRef.current. reload方法会自动触发request请求，actionRef 使用- 再请求删除/添加等接口成功后，使用 actionRef

       proTable没有设置从页数或者总数据数的入口。这时候就要用到request, request 能自动         获取表格数据，还有一个很重要的功能就是支持自动分页。

 import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
  
useEffect(() => {
    actionRef.current?.reload();
  }, [searchVal, searchDate, treeSelected]);


  const columns: ProColumns<QualityInspection>[] = [
    {
      title: <Box fontWeight="600">序号</Box>,
      width: 80,
      align: 'center',
      dataIndex: 'index',
    },
    {
      title: <Box fontWeight="600">**</Box>,
      width: 150,
      dataIndex: ['workingMatrix', 'areaName'],
    },
    {
      title: <Box fontWeight="600">**</Box>,
      dataIndex: 'hiddenDanger',
      hideInSearch: true,
      width: 150,
      // @ts-ignore
      render: (_, row) => HiddenDangerDict[row.hiddenDanger],
    },
    {
      title: <Box fontWeight="600">**</Box>,
      dataIndex: 'rectifyDate',
      valueType: 'date',
      width: 200,
    },
    {
      title: <Box fontWeight="600">**</Box>,
      dataIndex: 'businessState',
      hideInSearch: true,
      render: (_, row) => (
        <Space>{BusinessStateTagGenerator(row.businessState)}</Space>
      ),
    },
    {
      title: <Box fontWeight="600">操作</Box>,
      valueType: 'option',
      fixed: 'right',
      render: (text, record, _, action) => buttonAuthenticate(record),
    },
  ];

  const {
    data: dataSource = { content: [], totalElements: 0 },
    run: runGetTableData,
    loading: tableLoading,
  } = useRequest(
    () => {
      const newParams: any = {
        page: currentPage - 1,
        size: currentSize,
        date: searchDate,
        keyword: searchVal,
        matrixId: treeSelected.join(','),
      };
      return inspectionClient
        .getSecurityInspections(newParams)
        .then((res: ResponsePageable<any> | any) => {
          setDataSize(currentSize);
          setDataPage(currentPage);
          return res;
        })
        .catch(err => {
          message.error('获取数据失败');
          return { content: [], totalElements: 0 };
        });
    },
    {
      debounceWait: 500,
      refreshDeps: [currentPage, currentSize, searchDate, searchVal],
    },
  );


<ProTable<any>
            bordered
            loading={tableLoading}
            scroll={
              {x:120%,y:120%}
            }
            dataSource={dataSource?.content?.map((item: any, index) => ({
              ...item,
              index: (dataPage - 1) * dataSize + index + 1,
            }))}
            actionRef={actionRef}
            columns={columns}  //
            rowKey="key"  //表格行 key 的取值，可以是字符串或一个函数
            pagination={{
              showSizeChanger: true,  //Pagination 在 total 大于 50 条时会默认显示 size 切换器以提升用户交互体验。如果你不需要该功能，可以通过设置 showSizeChanger 为 false 来关闭。
              showQuickJumper: true,  //跳转至某一页，当数据只有一页的时候不会显示跳转；数据超过一页时，才会显示
              onChange: (page, size) => {
                setCurrentPage(page);
                setCurrentSize(size ?? currentSize);
              },
              pageSize: currentSize,
              current: currentPage,
              total: dataSource?.totalElements,
            }}
            toolBarRender={() => [   //渲染工具栏，支持返回一个dom数组，会自动增加margiRight
              <Flex
                justifyContent={'space-between'}
                width={'calc(80vw - 150px)'}
                key={'1'}
              >
                <Flex alignItems={'center'}>
                  <Search
                    placeholder="请按**搜索"
                    onSearch={onSearch}
                    style={{ width: 320 }}
                  />
                  <Flex marginLeft={'24px'} alignItems={'center'}>
                    <Text>**：</Text>
                    <DatePicker
                      onChange={onChange}
                      format="YYYY-MM-DD"
                      style={{ width: 320 }}
                    />
                  </Flex>
                </Flex>
                <Flex>
                  <PersonInChargeBtn />
                  <ComponentSecured auth={[AuthCode.**]}>
                    <Btn>
                      <Button
                        type="primary"
                        onClick={() =>
                          operationModalRef.current?.open(
                            '',
                            undefined,
                            '',
                            '',
                            treeSelected,
                          )
                        }
                        icon={<AddIcon />}
                      >
                        <Text size="14px">新增</Text>
                      </Button>
                    </Btn>
                  </ComponentSecured>
                </Flex>
              </Flex>,
            ]}
            options={false}
            search={false}
            dateFormatter="string"
          />

     useEffect 

1. 数据获取：当需要从服务器获取数据并更新组件状态时，可以使用useEffect来发送网络请求。在依赖项数组中keyword, activeId指定需要监视的变量，当这些变量发生变化时，重新发送请求。

2. 订阅事件：当需要订阅外部事件（如WebSocket消息、键盘事件等）并在事件触发时更新组件状态时，可以使用useEffect。在依赖项数组中指定需要监视的变量，当这些变量发生变化时，重新订阅事件。

3. 手动修改DOM：当需要手动修改DOM元素（如添加、删除、更新元素等）时，可以使用useEffect。在依赖项数组中指定需要监视的变量，当这些变量发生变化时，执行相应的DOM操作。

4. 清理副作用：有些副作用需要在组件卸载时进行清理，比如取消订阅、清除定时器等。可以在副作用函数中返回一个清理函数，并在依赖项数组为空时调用。