如何在antd Table中展示Firebase Realtime Database查询到的数据

核心错误点 #

原始代码构造Table所需的dataSource时，错误读取了Firebase返回条目下不存在的columns属性，导致传入表格的数据源全为undefined，对应字段无法正常渲染。

正确的数据源构造逻辑 #

移除对不存在的columns属性的读取，直接返回Firebase中的每条记录即可，同时建议补充Antd Table要求的每行唯一key属性，避免控制台渲染警告：

let data = Object.keys(leaderBoardObjects).map(id => ({
  // 展开原记录的所有字段（name、client等和columns的dataIndex一一对应）
  ...leaderBoardObjects[id],
  // 用Firebase的记录id作为行唯一标识
  key: id
}));

可优化项 #

1. 原始columns配置中Min Value和Max Value列的width属性缺失单位，建议修改为10%、15%避免样式异常
2. 若需要保留原实现中的编辑、删除操作，可在columns数组末尾新增操作列配置：

{
  title: '操作',
  width: '10%',
  render: (_, record) => (
    <>
      <a className="btn txt-primary" onClick={() => setCurrentId(record.key)}>
        <i className="fas fa-pencil-alt"></i>
      </a>
      <a className="btn txt-danger" onClick={() => onDelete(record.key)}>
        <i className="fas fa-trash"></i>
      </a>
    </>
  )
}

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