无法以 antd 形式显示来自 Firebase 实时数据库的数据答案

【问题标题】：Unable to display data from Firebase Realtime DataBase in antd Form无法以 antd 形式显示来自 Firebase 实时数据库的数据
【发布时间】：2021-06-11 14:20:19
【问题描述】：

我正在尝试使用钩子在 antd 表中显示来自 firebase 的数据。我使用简单的引导设计创建了这个应用程序的迷你版本，从 firebase 中提取数据：

   useEffect(() => {
    fireDB.child('leaderboard').on('value', snapshot=> {
      if (snapshot.val() !== null) {
        setLeaderBoardObjects({
          ...snapshot.val()
        });
      }
    })
  }, [])

并显示它：

            <tbody>
              {
                Object.keys(leaderBoardObjects).map(id => {
                  return <tr key={id}>
                      <td>{leaderBoardObjects[id].name}</td>
                      <td>{leaderBoardObjects[id].client}</td>
                      <td>{leaderBoardObjects[id].project}</td>
                      <td>{leaderBoardObjects[id].min_value}</td>
                      <td>{leaderBoardObjects[id].max_value}</td>
                      <td>
                        <a className="btn txt-primary" onClick={() => {setCurrentId(id)}}>
                          <i className="fas fa-pencil-alt"></i>
                        </a>
                        <a className="btn txt-danger" onClick={() => {onDelete(id)}}>
                          <i className="fas fa-trash"></i>
                        </a>
                      </td>
                    </tr>
                })
              }
            </tbody>

通过每个 id 进行映射。

antd 的表格设计方式完全不同，我似乎找不到显示数据的正确方法。

我想既然调用了antd的表：

<Table
 columns={columns}
 dataSource={data}
/>

我应该将Object.keys().map 分配给数据：

let data = Object.keys(leaderBoardObjects).map(dataIndex =>
 leaderBoardObjects[dataIndex].columns
);

我用这种方式尝试了一些变体，有和没有.columns。我认为有必要指定给定的列结构，但我认为这并不重要。目前完整代码为：

const LeaderBoard = () => {
  let [leaderBoardObjects, setLeaderBoardObjects] = useState({});

 
   useEffect(() => {
    fireDB.child('leaderboard').on('value', snapshot=> {
      if (snapshot.val() !== null) {
        setLeaderBoardObjects({
          ...snapshot.val()
        });
      }
    })
  }, []) 

  let data = Object.keys(leaderBoardObjects).map(dataIndex => 
    leaderBoardObjects[dataIndex].columns
  ); 

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      sorter: true,
      render: name => `${name}`,
      width: '25%',
    },
    {
      title: 'Client',
      dataIndex: 'client',
      render: client => `${client}`,
      width: '25%',
    },
    {
      title: 'Project',
      dataIndex: 'project',
      render: project => `${project}`,
      width: '25%',
    },
    {
      title: 'Min Value',
      dataIndex: 'min_value',
      render: min_value => `${min_value}`,
      width: '10',
    },
    {
      title: 'Max Value',
      dataIndex: 'max_value',
      render: max_value => `${max_value}`,
      width: '15',
    }
  ];


  return (
    <Table
      columns={columns}
      dataSource={data} 
    />
  )
}

export default LeaderBoard

每列只显示undefined。

明显忽略或过度复杂化某事，但我坚持这一点的时间比我想承认的要长。

编辑：我很笨，回答了我自己的问题。事实上，我并没有尝试使用/不使用 .columns 的所有变体。

  let data = Object.keys(leaderBoardObjects).map(dataIndex => 
    leaderBoardObjects[dataIndex]
  );

工作。

【问题讨论】：

标签： reactjs antd

【解决方案1】：

我很笨，回答了我自己的问题。事实上，我并没有尝试使用/不使用 .columns 的所有变体。

let data = Object.keys(leaderBoardObjects).map(dataIndex => 
   leaderBoardObjects[dataIndex]
 );

工作。

【讨论】：