制表符表错误“未捕获的类型错误：无法读取未定义的属性（读取‘generateExportList’）”

Question

虽然将制表符表数据下载为 CSV、XLSX 或 PDF 会引发错误“未捕获的类型错误：无法读取未定义的属性（读取‘generateExportList’）”

我已经创建了一个 DataTable 组件，并且每次都通过从父组件配置设置来重用。我正在使用 forwardRef 在父组件中使用表函数。一切正常，但无法下载。

从父组件传递这些道具。

     <DataTable
        columns={columns}
        groupBy="startdate"
        rowClick={rowClick}
        ajaxUrl={`${getAdminUrl()}/monthsEvent`}
        downloadAble={true}
      />

    import { useRef, useEffect, forwardRef, useImperativeHandle } 
    from "react";
    import { FaDownload } from "react-icons/fa";

    import {
      Tabulator,
      FormatModule,
      EditModule,
      ResizeColumnsModule,
      SortModule,
      PageModule,
      FilterModule,
      GroupRowsModule,
      DownloadModule,
      AjaxModule,
      MoveColumnsModule,
      ResizeTableModule,
      FrozenColumnsModule,
      InteractionModule,
      ResponsiveLayoutModule,
    } from "tabulator-tables";
    
    
        import { loadScript } from "../../../helpers/Helper";
        import ExportExcel from "./ExportExcel";
    
    Tabulator.registerModule([
      FormatModule,
      EditModule,
      ResizeColumnsModule,
      SortModule,
      PageModule,
      FilterModule,
      GroupRowsModule,
      DownloadModule,
      AjaxModule,
      MoveColumnsModule,
      InteractionModule,
      ResizeTableModule,
      FrozenColumnsModule,
      ResponsiveLayoutModule,
    ]);
    
    const DataTable = forwardRef((props, ref) => {
      let timer;
      const table = useRef();
      const tableRef = useRef();
      const tableWrapperRef = useRef();
    
      const handleSearch = (e) => {
        clearTimeout(timer);
    
        const timer = setTimeout(() => {
          table.current.setFilter("any", "like", e.target.value, {
            matchAll: true,
          });
        }, 500);
      };
    
      useImperativeHandle(ref, () => ({
        deleteRow(rowId) {
          table.current.deleteRow(rowId);
        },
        updateTable() {
          table.current.setData();
        },
      }));
    
      useEffect(() => {
        table.current = new Tabulator(
          tableRef.current,
          {
            ajaxURL: props.ajaxUrl,
            ajaxConfig: {
              method: "GET", //set request type to Position
              headers: {
                authorization: `Bearer ${localStorage.getItem("admin-token")}`,
              },
            },
            ajaxResponse: function (_url, params, response) {
              response.data.last_page = response.data.meta.last_page;
              response.data.last_row = response.data.meta.total;
              return response.data;
            },
            sortMode: "remote",
            initialSort: [{ column: "id", dir: "asc" }],
            filterMode: "remote",
            pagination: true,
            paginationMode: "remote",
            paginationButtonCount: 3,
            paginationCounter: "rows",
            paginationSize: 25,
            // paginationSizeSelector: [10, 25, 50, 100],
            dataSendParams: {
              page: "page",
              size: "per_page",
            },
            dataReceiveParams: {
              last_page: "last_page",
            },
            // height: 300,
            groupBy: props.groupBy,
            layout: "fitColumns",
            responsiveLayout: "collapse",
            responsiveLayoutCollapseStartOpen: false,
            resizableColumnFit: true,
            layoutColumnsOnNewData: true,
            movableColumns: true,
            langs: {
              default: {
                pagination: {
                  counter: {
                    showing: "",
                    of: "of",
                    rows: "",
                    pages: "",
                  },
                },
              },
            },
            columns: props.columns,
          },
          []
        );
    
        table.current.on("cellEdited", function (cell) {
          props.onCellEdit(cell.getRow().getData());
        });
    
        table.current.on("rowClick", function (e, row) {
          props.rowClick(row.getData());
        });
      });
    
      const downloadCsvData = () => {
        table.current.download("csv", "data.csv", { delimiter: "," });
      };
    
      const downloadDataPdf = () => {
        table.current.download("pdf", "data.pdf", {
          orientation: "portrait",
          title: "Example Report",
        });
      };
    
      return (
        <div className="table-wrapper flex max-h-full w-[calc(100vw-3rem)] flex-col overflow-hidden lg:w-full">
          {props.search && (
            <div className="my-2 mb-2 flex items-center lg:my-4">
              <label htmlFor="" className="mr-1 lg:ml-4">
                Search:
              </label>
              <input
                type="text"
                name=""
                id=""
                className="rounded-lg border-2 px-4"
                onChange={handleSearch}
              />
            </div>
          )}
    
          {props.downloadAble && (
            <div className="mb-2 flex items-center justify-end gap-2">
              <button
                onClick={downloadCsvData}
                className="flex items-center gap-1 rounded-md border px-4 py-1"
                id="download-csv"
              >
                <FaDownload /> CSV
              </button>
              <button
                // onClick={() => ExportExcel()}
                className="flex items-center gap-1 rounded-md border px-4 py-1"
                id="download-xlsx"
              >
                <FaDownload /> XLSX
              </button>
              <button
                // onClick={() => downloadDataPdf()}
                className="flex items-center gap-1 rounded-md border px-4 py-1"
                id="download-pdf"
              >
                <FaDownload /> PDF
              </button>
            </div>
          )}
          <div
            className={`w-full grow overflow-auto ${
              props.downloadAble
                ? "h-[calc(100vh-14.25rem)]"
                : "h-[calc(100vh-12.25rem)]"
            }`}
            id="table-wrapper"
            ref={tableWrapperRef}
          >
            <div
              ref={tableRef}
              id="data-table"
              className={`h-full w-full lg:w-full`}
            ></div>
          </div>
        </div>
      );
    });
    
    export default DataTable;