現在 HeadInfo 的時間是固定的，看起來不太真實，所以我們要改成顯示現在的時間。

安裝 dayjs

處理時間的 JS 套件很多，例如 moment、date-fns、dayjs 等等，我們就選一個最小的，這裡我們使用 dayjs 來處理時間。

$ npm install dayjs --save

設定時間狀態

可以選擇使用 useState 來設定時間狀態，但是既然都用了 Zustand 了，就直接使用 Zustand 來設定時間狀態。

到 src/store/index.ts 中新增時間狀態：

interface Store {
  // 省略其他程式碼
  currentDate: string | null
  setCurrentDate: (date: string | null) => void
}

const useStore = create<Store>((set) => ({
  // 省略其他程式碼
  currentDate: null,
  setCurrentDate: (date) => set({ currentDate: date })
}))

設定完型別以及狀態後，我們就可以在 HeadInfo 中使用了。

取得現在時間

在 HeadInfo 中，我們要取得現在時間，然後設定到狀態中，這裡我們使用 dayjs 來取得現在時間：

import { useEffect } from 'react'
import { View, Text } from 'react-native'
import dayjs from 'dayjs'
import useStore from '../store'

const HeaderInfo = () => {
  const { city, currentDate, setCurrentDate } = useStore()

  useEffect(() => {
    const now = dayjs()
    setCurrentDate(now.format('dddd, D MMMM'))
  }, [])

  return (
    <View className='items-center p-6 space-y-4 w-500'>
      <Text className='text-2xl font-semibold text-white'>{city}</Text>
      <Text className='text-sm text-gray-200'>{currentDate}</Text>
    </View>
  )
}

export default HeaderInfo

使用 useEffect 搭配 dayjs 取得現在時間，並且設定格式為「星期幾，幾號月份」，最後設定到狀態中。然後就可以在 HeadInfo 中顯示現在時間了。

需要考慮的地方

現在時間設定為每次進入 App 時，都會重新取得現在時間。雖然一般人使用天氣 App，不會花太多時間在上面，但是如果使用者剛好在 23:59 打開 App，然後等到 00:00 時，這時候的時間就不會是正確的，所以還是需要考慮避免遇到這個問題。

解決的方法也很簡單，就是在 useEffect 中加入 setInterval，每隔一段時間就重新取得現在時間，這樣就可以避免上面的問題了。

const updateCurrentDate = () => {
  const now = dayjs()
  setCurrentDate(now.format('dddd, D MMMM'))
}

useEffect(() => {
  updateCurrentDate()

  const interval = setInterval(() => {
    updateCurrentDate()
  }, 1000 * 60)

  return () => clearInterval(interval)
}, [])

我們把取得現在時間的邏輯抽出來，然後在 useEffect 中呼叫一次，接著每隔一分鐘就呼叫一次，最後在 useEffect 中回傳 clearInterval，做一個清除的動作。

這個動作不是必須，但可以考慮加入，這樣就可以避免上面提到的問題。

本篇文章介紹了如何使用 dayjs 來處理時間，並且在 HeadInfo 中顯示現在時間，明天來處理未來幾小時的天氣狀況，明天見👋！