Antd Table未显示首行数据问题求助

1. 检查rowKey配置是否正确 #

Antd Table 依赖唯一标识渲染行数据，默认读取每条数据的key字段。如果你的用户数据无key字段，或存在重复key值，会导致Table自动去重或丢失行数据。

解决方法：

• 若数据有其他唯一字段（如id），直接在Table组件指定rowKey：

<Table dataSource={users} rowKey="id" columns={columns} />

• 或通过函数返回唯一值：

<Table dataSource={users} rowKey={(record) => record.userId} columns={columns} />

2. 确认dataSource为完整接口返回数据 #

检查传递给Table的dataSource是否直接使用react-query返回的data，是否存在误过滤、切片操作（比如data.slice(0,3)）。示例：

// 错误：不小心截断数据
<Table dataSource={users.slice(0,3)} columns={columns} />

// 正确：传递完整数据
<Table dataSource={users} columns={columns} />

3. 排查列配置的渲染逻辑 #

检查columns中的render函数是否有错误条件判断，导致行显示异常。比如：

// 错误：字段为空时返回null，可能引发整行渲染问题
{
  title: '邮箱',
  dataIndex: 'email',
  render: (text) => text ? <span>{text}</span> : null
}

建议字段为空时返回占位符：

render: (text) => text || '-'

4. 验证react-query返回的数据完整性 #

在组件中打印数据，确认react-query返回的data确实是4条，无重复或缺失：

console.log('用户数据:', users); // 查看控制台输出的数组长度与内容

5. 检查Table的分页/筛选配置 #

确认是否误开启分页并设置每页3条：

// 错误：开启分页且默认每页3条
<Table dataSource={users} columns={columns} pagination={{ pageSize: 3 }} />

无需分页则直接关闭：

<Table dataSource={users} columns={columns} pagination={false} />

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