Блог

проблема

Когда я обновляю объект, хранящийся в моем ContextProvider, я вижу, что все данные обновляются соответствующим образом, за исключением обратного отсчета даты.

Подробные сведения

У меня есть компонент боковой панели, который отображает данные из списка. При нажатии на элемент списка я обновляю состояние объекта, выбранного в отдельном контексте реакции. Это прекрасно работает. Пример того, какой объект хранится, приведен ниже.

Объект Контекста

 {
   "title": "I am the title",
   "startDate" "2021-11-01T02:00:00.000Z"
}
 

Затем я использую этот объект для вывода компонента боковой панели с заголовком и отсчетом секунд.

Сайдпанель.tsx

 export function SidePanel() {
    const { active } = useSidePanel()

    const countdown = useCountdown(new Date(active.startDate))

    return (
        <div>
            <h1>{active.title}</h1>
            <p>{countdown} seconds to go</p>
        </div>
    )
}
 

useCountdown.tsx

 export function useCountdown(date: Date) {
    const [countdown, setCountdown] = useState<number>(0)

    const formatCountdown = () => {
        const diffInSeconds = dateFns.differenceInSeconds(date, new Date())

        if (diffInSeconds <= 1) return 0
        setCountdown(diffInSeconds)
    }

    useEffect(() => {
        const interval = setInterval(() => {
            formatCountdown()
        }, 1000)

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

    return countdown
}
 

Поэтому, добавив «дата» в массив useEffect внутри useCountdown.tsx, я смог решить эту проблему

 export function useCountdown(date: Date) {
    ...

    useEffect(() => {
        const interval = setInterval(() => {
            formatCountdown()
        }, 1000)

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

}