如何将时间戳firestore转换为日期字符串并在antd中显示table

Question

首先，我有 antd table 和来自 firestore 的数据源，其中包含一些字段并包括时间戳字段。我的数据很好运行并且在 antd 中显示 table，问题只是时间戳值没有显示。

这是代码

获取数据

useEffect(() => {
  const unsub = //some code
  //some code
  //some code
  .onSnapshot((querySnapshot) => {
   let list = []
   querySnapshot.forEach((doc) => {
      list.push({
      id: doc.id,
      ...doc.data(),
      })
   })
   setData(list)
   setLoading(false)
   })

   return () => {
      unsub()
   }
},[])

数据结构

[{id: '1', name: 'Gie', timestamp: {seconds: 1651770000, nanoseconds: 0}, {id: '2', name: 'Yud', timestamp: {seconds: 1652370000, nanoseconds: 0}]

时间戳格式自动来自 firestore 时间戳字段

蚂蚁table

<TableData
 pagination={{
     position: ['bottomRight'],
     pageSize: 10,
     total: 0,
     showTotal: (total) => `Total ${total} item`,
 }}
 onChange={handleTable}
 columns={userColumns}
 dataSource={filterTable == null ? data : filterTable}
 rowKey={(record) => record.id}
 rowSelection={rowSelection}
 loading={loading}
 size="middle"
 />

antd table 用户栏

const userColumns = [
        {//other column
         //other column
        },
        {
            title: 'Timestamp',
            dataIndex: 'timestamp',
            key: 'timestamp',
            width: '12%',
            renderCell: (params) => {
                return 
                <div>{params.timestamp.toDate()}</div> //doesnt work and not show anything
            },
            sorter: (a, b) => a.timestamp - b.timestamp,
            sortOrder: sortedInfo.columnKey === 'timestamp' && sortedInfo.order,
        },
]

另一个代码我正在尝试但不起作用

{new Date(params.timestamp).toDateString()}

{new Date(params.timestamp).toLocaleDateString('id-ID')}

{new Date(params.timestamp.seconds * 1000).toLocaleDateString('id-ID')}

但是当我尝试使用地图转换时效果很好

const date = data.map((item) => {timestamp: new Date(item.timestamp.seconds * 1000).toLocaleDateString('id-ID')})

console.log(date) //output : 5/6/2022

Answer 1

如果不知道您传递给实际 <Table /> 组件的内容，则很难判断。检查传递给具有 timestamp dataIndex 的列的内容是否正确。

我感觉你的数据好像

{
    ....
    timestamp: "",
    ...
}

在这种情况下，它应该是 params.toDate() 而不是 params.timestamp.toDate()。

Answer 2

已修复更新

我不知道为什么antd table 不能直接在renderCell 或render 中转换时间戳。所以我选择像这样从 firestore 设置数据。

useEffect(() => {
  const unsub = //some code
  //some code
  //some code
  .onSnapshot((querySnapshot) => {
   let list = []
   querySnapshot.forEach((doc) => {
      list.push({
      id: doc.id,
      name: doc.data().name,
      timestamp: doc.data().timestamp,
      dateString: new Date(doc.data().timestamp.seconds * 1000).toLocaleDateString('id-ID')
      })
   })
   setData(list)
   setLoading(false)
   })

   return () => {
      unsub()
   }
},[])

用户列

const userColumns = [
            {//other column
             //other column
            },
            {
                title: 'Date',
                dataIndex: ['dateString', 'timestamp'],
                key: 'timestamp',
                width: '12%',
                render: (e, params) => {
                    return 
                    <div>{params.dateString}</div>
                },
                sorter: (a, b) => a.timestamp - b.timestamp,
                sortOrder: sortedInfo.columnKey === 'timestamp' && sortedInfo.order,
            },
    ]

如何将时间戳firestore转换为日期字符串并在antd中显示table

How to convert timestamp firestore to date string and display in antd table

javascript

reactjs

antd

google-cloud-firestore