如何在React中将嵌套数组渲染为Ant Design Table的dataSource

核心问题分析 #

你的tasks是嵌套数组结构：外层是长度为1的数组，内部才是包含所有任务对象的数组。不需要循环生成多个Table，直接提取内层数组作为dataSource即可。

修正后的代码 #

import React from 'react';
import { Table } from 'antd';

export default function DataTable({ tasks }) {
  // 处理空数组边界情况，避免访问undefined报错
  const dataSource = tasks.length > 0 ? tasks[0] : [];

  return (
    <Table
      columns={dataTableColumns}
      rowKey={(item) => item._id}
      dataSource={dataSource}
      pagination={true}
    />
  );
}

关键说明 #

• 直接取tasks[0]作为数据源：你的控制台输出显示tasks[0]就是包含两个任务对象的数组，正好符合Table对dataSource的格式要求（数组对象集合）
• 增加空数组判断：当tasks为空时，返回空数组作为数据源，避免出现Cannot read properties of undefined的报错
• 无需循环渲染Table：AntD Table组件会自动遍历dataSource中的每一项，生成对应的表格行

扩展场景（可选） #

如果后续你的tasks结构变为多层嵌套（比如外层包含多个任务数组），可以使用数组扁平化方法统一处理：

// 将多层嵌套数组转为一维数组
const dataSource = tasks.flat(Infinity);

内容的提问来源于stack exchange，提问作者Indradeep