ReactJS moment庫時間戳轉換的bug解決方案

Steven最近在開發公司的活動管理系統的過程中遇到了一個問題:

  時間在數據表裏面存儲的是時間戳的格式,使用React moment庫來轉換爲“2019-12-29 10:00:00” 這種格式的時候的時候,會出現一個問題:直接使用moment函數會自動把我的時間戳截取掉最後三位導致轉化出的時間出入很大。當然了我做事講究有圖有真相,看圖說話:

第一眼看到這個時間的感受,這不是那啥嗎? 一般時間算錯了才這樣!!!

再把時間戳打印出來一看是:{startTime: 1569204512, endTime: 1577608905, exchangeEndTime: 0}

然後,找到一個專業的時間戳和時間轉換的網站(網站地址:https://tool.lu/timestamp/),把我的時間戳輸入

所以,很顯然是在轉換過程中出現了問題,那麼問題出現在哪裏呢?

首先,我想到的是可能是數據從數據庫中取出來會不會出錯了,然後我把數據單獨的打印出來發現,就是1569204512,所以這個可能性被排除。 然後我忍不住好奇的把 moment給我返回的結果“1970-01-19 11:53:24”也用在線工具轉換了一下,想看看它對應的時間戳是什麼樣的?

果然,我發現了玄機,這個地方的時間戳已經被截取掉了後面的三位,那到這裏怎麼辦呢? 

直接使用moment函數來轉換的話(代碼如上),就會把最後的三位截取掉。

{moment(timeArr['startTime']).format("YYYY-MM-DD HH:mm:ss")}

 

哪怕我嘗試這樣寫(👇),輸出的結果依然是:“1970-01-19 11:53:24”


{moment(parseInt(1569204512)).format("YYYY-MM-DD HH:mm:ss")}

所以,可以排除是取值的問題,一定是用moment處理的過程中值被改變,那麼怎麼去處理這個問題呢?

最開始,我想到了兩種解決方案:

#1.簡單粗暴地在timeArr['endTime']後面加上三個0,來給它截取,能保留我們需要的值就好
{moment(parseInt(timeArr['endTime']+'000')).format("YYYY-MM-DD HH:mm:ss")}

這種方案簡單粗暴,但是確實有效的,輸出的結果也沒有讓我失望。

#2.找到moment.js代碼,修改代碼,把這種不合理的處理方式幹掉,但是打開代碼會發現,改文件有5000行,頭大不大???

還是不甘心,在Ctrl+F搜索“moment(” 發現可以匹配到的只有下面這種在''裏面出現的,並沒有function moment()定義

'moment().lang() is deprecated. Instead, use moment().localeData() to get the language configuration. Use moment()

那麼,我直接找3行不行呢,結果發現還是不行,因爲出現3的地方並沒有做字符截取的操作,
而且文件裏面各個函數還存在這調用關係,所以修改一個文件,可能導致引用此文件的地方報錯。

到這裏,大家可以看到問題可以被解決,但是第一種解決方案並不夠優雅,所以在喫完飯後坐在辦公位,打開moment庫的官方文檔(網址:http://momentjs.cn/docs/#/use-it/troubleshooting/)開始研究,發現並不是沒有更好的解決方案,答案就在它自帶的函數裏面。那麼我的思路是什麼呢? 先大致看一下它的介紹,主要是爲了縮小範圍,看答案可能出現在哪個區域裏面。

從頭到尾,快速瀏覽了一遍,鎖定了,答案在解析這一部分裏面。然後我查了一下時間戳的英文是:timestamp。ok ,search timestamp in the page. 果然 有12個匹配,當我看到unix()函數的介紹的時候,我就知道,我要找的答案就在這裏了。

 

代入到代碼裏面,驗證一遍。

 <div>活動開始時間:&nbsp;&nbsp;{moment.unix(timeArr['startTime']).format("YYYY-MM-DD HH:mm:ss")} </div><br />
        <div>活動結束時間:&nbsp;&nbsp;{moment.unix(timeArr['endTime']).format("YYYY-MM-DD HH:mm:ss")} </div><br />

 

 

接下來,我們再看頁面輸出結果:

完美,我終於用了一種 能說服我自己喫的方案把這個問題解決了[/捂臉].

ok,關於React 裏面時間戳的轉換問題就講解到這裏,後續會持續有分享,請大家持續關注我的博客!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章