React+TypeScript中Ant Design列表组件渲染分组数组的问题

你的问题核心在于两个点：一是state的类型定义不匹配，二是遍历二维数组时的错误取值。咱们一步步来修正：

1. 修正State的类型 #

因为接口返回的是二维数组（Book[][]），但你初始化的state类型是Book[]，这会导致TypeScript类型校验出错，同时也会让后续遍历逻辑出问题。所以首先要把state的类型改成二维数组：

const [books, setBooks] = useState<Book[][]>([]);

2. 正确遍历二维数组生成List组件 #

你之前在map里用data[0]只取了每个子数组的第一个元素，这显然不对。实际上，map的每一项data就是你要渲染的子数组，直接把它传给List的dataSource即可。另外，React列表渲染必须给每个组件加唯一的key，这里可以用子数组里的日期来生成key（或者用索引，不过日期更语义化）。

修正后的完整代码：

import React, { useEffect, useState } from 'react';
import { getBooksList } from '../../services/AuthService';
import { Book } from '../../interfaces/Book';
import { List } from 'antd';

const App = () => {
  // 修正state类型为二维数组
  const [books, setBooks] = useState<Book[][]>([]);

  useEffect(() => {
    getBooksList()
      .then((res) => {
        setBooks(res.data);
      })
      .catch((error) => {
        console.error('获取书籍列表失败:', error); // 建议加上错误日志，方便调试
      });
  }, []);

  return (
    <>
      {books.map((bookGroup, index) => {
        // 从子数组的第一个元素取日期作为key（如果子数组非空的话）
        const groupKey = bookGroup.length > 0 ? bookGroup[0].createdAt.split('T')[0] : `group-${index}`;
        
        return (
          <List
            key={groupKey}
            title={`书籍列表 - ${bookGroup.length > 0 ? bookGroup[0].createdAt.split('T')[0] : '无日期'}`}
            dataSource={bookGroup} // 直接传入子数组作为数据源
            renderItem={(item: Book) => (
              <List.Item key={item.BookSubject}> {/* 每个列表项也要加唯一key */}
                <h3>{item.BookSubject}</h3>
              </List.Item>
            )}
            style={{ marginBottom: 24 }} // 给每个List加底部间距，区分开来
          />
        );
      })}
    </>
  );
};

export default App;

关键说明 #

• 类型匹配：确保state的类型和接口返回的数据结构一致，避免TypeScript报错。
• 正确使用map：外层map遍历的是每个子数组（分组），每个子数组直接作为对应List的数据源。
• Key的必要性：给每个List和List.Item都加上唯一的key，避免React渲染警告，提升性能。
• 优化体验：给每个List添加标题（显示分组日期）和底部间距，让界面更清晰。

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