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

如何解决TypeError: (data || []).forEach 不是函数

我正在尝试使用蚂蚁设计表渲染数据，但它不起作用。我认为这是因为我的回复中的对象键“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 > ;
}

可能是什么问题？

解决方法

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

<Table childrenColumnName="antdChildren" />

阅读有关表树数据结构 here

的更多信息