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

【问题标题】：TypeError: (data || []).forEach is not a functionTypeError: (data || []).forEach 不是函数
【发布时间】：2021-01-25 18:13:41
【问题描述】：

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

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

我还想指出，我上传的 csv 文件数据没有“children”列，而且效果很好。

我的回答：

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 > ;
}

可能是什么问题？

【问题讨论】：

(data || []).forEach 不会出现在您共享的代码中的任何位置，因此我们无法帮助您理解为什么 data 没有 forEach。猜测一下，它是一个不是数组的对象。
我从 AntDesign 中检查了我的 Table props dataSource，节点模块文件中有 data 和 children props。我已经更新了我的帖子，所以你可以了解更多@T.J.Crowder
请添加出现错误的行或为问题创建要点或代码笔
请添加出现错误的行或为问题创建要点或代码笔
请添加出现错误的行或为问题创建要点或代码笔

标签： javascript reactjs foreach datatable antd

【解决方案1】：

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

<Table childrenColumnName="antdChildren" />

详细了解表树数据结构here

【讨论】：