Question

我正在尝试使用钩子在 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]
  );

作品。

Answer 1

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

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

作品。

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

1 个答案: