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

Question

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

当我运行我的代码时，我收到错误： TypeError: (data || []).forEach is not a function

我还想指出，我已经上传了 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 设计使用数据中的children属性在表中显示树结构，并且它接受数组而不是字符串，因此出现错误。 您可以使用childrenColumnName属性告诉 Table 组件为此功能使用不同的名称，如下所示：

<Table childrenColumnName="antdChildren" />

在此处阅读有关表树数据结构的更多信息