shalawfatah Ответов: 0

Как я могу решить, что 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, но я не уверен, как это сделать.

0 Ответов