无法以 antd 形式显示来自 Firebase Realtime DataBase 的数据

Question

我正在尝试使用挂钩在 antd table 中显示来自 firebase 的数据。我用一个简单的 bootstrap 设计创建了这个应用程序的迷你版本，使用以下方法从 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 在其 table 的设计方式上有很大不同，我似乎无法找到显示数据的正确方法。

我想因为antd的table被调用了：

<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。

显然忽略了某些事情或使某些事情过于复杂，但我坚持这一点的时间比我愿意承认的要长。

编辑：我愚蠢并回答了我自己的问题。事实上我并没有尝试每一种变化 with/without .columns.

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

有效。

Answer 1

我傻了，回答了我自己的问题。事实上我并没有尝试每一种变化 with/without .columns.

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

有效。

无法以 antd 形式显示来自 Firebase Realtime DataBase 的数据

Unable to display data from Firebase Realtime DataBase in antd Form

reactjs

antd