Как я могу решить, что react не может выполнить обновление состояния на моей странице?
Я создаю обратный отсчет событий на одной из своих страниц. Это работает хорошо, но есть предупреждение:
```
Предупреждение: не удается выполнить обновление состояния реагируют на узле демонтирована. Это не операция, но она указывает на утечку памяти в вашем приложении. Чтобы исправить это, отмените все подписки и асинхронные задачи в функции очистки useEffect.
```
Вот весь мой код:
import React, {useState, useRef, useEffect} from 'react' import Layout from '../components/layout' import MainEvent from '../components/events/MainEvent' import MarginalEvent from '../components/events/MarginalEvent' import SEO from '../components/SEO' import { graphql } from 'gatsby' import {navigate} from 'gatsby-link' import { format } from 'date-fns' const Events = ({data}) => { const {allStrapiEvents:{nodes:events}} = data const found = events.find((event)=> { const today = new Date() const myday = new Date(event.date) if(myday > today) { return event } else { return null } }) const [timerDays, setTimerDays] = useState('00'); const [timerHours, setTimerHours] = useState('00'); const [timerMinutes, setTimerMinutes] = useState('00'); const [timerSeconds, setTimerSeconds] = useState('00'); let interval = useRef(); const startTimer = () => { const countdownDate = new Date(found.date).getTime(); interval = setInterval(()=> { const now = new Date().getTime(); const distance = countdownDate - now; let days = Math.floor(distance / (1000 * 60 * 60 * 24)); let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); let seconds = Math.floor((distance % (1000 * 60)) / 1000); if(distance < 0) { clearInterval(interval.current) } else { setTimerDays(days) setTimerHours(hours) setTimerMinutes(minutes) setTimerSeconds(seconds) } }, 1000) } useEffect(()=> { const someref = interval.current startTimer() return ()=> { clearInterval(someref) } }) return ( <Layout> <SEO title="Events" /> <div className="py-5"> <MainEvent title={found.title} image={found.photo.childImageSharp.fluid.src} slug={found.slug} setDays={timerDays} setHours={timerHours} setMinutes={timerMinutes} setSeconds={timerSeconds} /> <div className="flex flex-wrap justify-center"> {events.map((event)=> { return ( <div key={event.id}> {new Date(event.date) > new Date() ? <MarginalEvent title={event.title} summary={event.summary} date={format(new Date(event.date), 'dd MMMM, yyyy')} location={event.location} image={event.photo.childImageSharp.fluid} slug={event.slug} /> : '' } </div> ) })} </div> </div> </Layout> ) } export default Events
Что я уже пробовал:
Я пытался использовать:
useEffect(()=> { const someref = interval.current startTimer() return ()=> { clearInterval(someref) } }, [])
Или даже это
useEffect(()=> { const someref = interval.current startTimer() return ()=> { clearInterval(someref) } }, [startTimer])
Но это всегда дает другое сообщение об ошибке, я даже использовал
useCallback()но опять же, он возвращается с другой проблемой. Кто-нибудь может мне помочь?
Gerry Schmitz
Загрузка изображений может привести к утечке памяти, если ее не освободить.
shalawfatah
Спасибо Джерри Шмитцу, но я не думаю, что это связано с изображениями. Это скорее крючок useEffect, но я не уверен, как это сделать.