TypeError: (data || []).forEach 不是函数

Question

我正在尝试使用蚂蚁设计表渲染数据，但它不起作用。我认为这是因为我的回复中的对象键“children”。

当我运行我的代码时出现错误： TypeError: (data || []).forEach 不是函数

我还要注意的是，我上传了没有“children”列的 csv 文件数据，它运行良好。

我的回答：

import React, { useState } from "react";
import { parse } from "papaparse";
import _ from "lodash";
import { Upload, message, Button, Table, Input } from "antd";
import { UploadOutlined } from "@ant-design/icons";

export default function Home() {

  const [columns, setColumn] = useState([]);
  const [baseData, setBaseData] = useState([]);
  const [filterTable, setFilterTable] = useState(null);

  const props = {
    name: "file",
    accept: ".txt, .csv",
    headers: {
      authorization: "authorization-text",
    },
    async onChange(info) {
      if (info.file.status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === "done") {
        const texts = await info.file.originFileObj.text();
        const results = parse(texts, {
          header: true
        });

        const col = _.keys(results.data[0]);

        const customCol = _.map(col, (value) => ({
          title: value,
          dataIndex: value,
          key: value.toLowerCase(),
        }));

        const data = results.data;
        
        console.log({ customCol });
        console.log({ data });

        setColumn(customCol);
        setBaseData(data);

        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === "error") {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };

  return (
    <div>
      <main>
        <Upload {...props}>
          <Button icon={<UploadOutlined />}>Click to Upload</Button>
        </Upload>

        <Table pagination={false} columns={columns} dataSource={filterTable == null ? baseData : filterTable} />
        
      </main>
    </div>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

这是桌子道具：

export interface TableProps < RecordType > extends Omit < RcTableProps < RecordType > , 'transformColumns' | 'internalHooks' | 'internalRefs' | 'data' | 'columns' | 'scroll' | 'emptyText' > {
  dropdownPrefixCls ? : string;
  dataSource ? : RcTableProps < RecordType > ['data'];
  columns ? : ColumnsType < RecordType > ;
  pagination ? : false | TablePaginationConfig;
  loading ? : boolean | SpinProps;
  size ? : SizeType;
  bordered ? : boolean;
  locale ? : TableLocale;
  onChange ? : (pagination: TablePaginationConfig, filters: Record < string, (Key | boolean)[] | null > , sorter: SorterResult < RecordType > | SorterResult < RecordType > [], extra: TableCurrentDataSource < RecordType > ) => void;
  rowSelection ? : TableRowSelection < RecordType > ;
  getPopupContainer ? : GetPopupContainer;
  scroll ? : RcTableProps < RecordType > ['scroll'] & {
    scrollToFirstRowOnChange ? : boolean;
  };
  sortDirections ? : SortOrder[];
  showSorterTooltip ? : boolean;
}

export interface TableProps < RecordType = unknown > extends LegacyExpandableProps < RecordType > {
  prefixCls ? : string;
  className ? : string;
  style ? : React.CSSProperties;
  children ? : React.ReactNode;
  data ? : RecordType[];
  columns ? : ColumnsType < RecordType > ;
  rowKey ? : string | GetRowKey < RecordType > ;
}

可能是什么问题？

Answer 1

Ant design 使用数据中的 children 属性在表中显示树结构，它接受数组而不是字符串，因此出现错误。您可以通过使用 childrenColumnName 属性告诉 Table 组件为此功能使用不同的名称，如下所示：

<Table childrenColumnName="antdChildren" />

阅读有关表树数据结构 here

的更多信息