Utworzyłem komponent licznika czasu, który przekazuje dane do innego komponentu i używam setTimeout. Komponent działa zgodnie z oczekiwaniami, ale w mojej konsoli pojawia się ostrzeżenie:

Ostrzeżenie: nie można przeprowadzić aktualizacji stanu React na niezmontowanym komponencie. Nie jest to konieczne, ale wskazuje na wyciek pamięci w aplikacji. Aby to naprawić, anuluj wszystkie subskrypcje i zadania asynchroniczne w funkcji czyszczenia useEffect.

Kiedy używam setTimeout w useEffect, próbowałem dodać clearInterval w funkcji powrotu, ale to nie pomaga. Poniżej możesz znaleźć mój komponent:

export default function createEvent(WrappedComponent) {
  const Event = props => {
    const [{ endDate }] = useState(props);
    const [days, setDays] = useState('');
    const [hours, setHours] = useState('');
    const [minutes, setMinutes] = useState('');
    const [seconds, setSeconds] = useState('');

    const interval = useRef();

    useEffect(() => {
      interval.current = setInterval(() => {
        const date = moment.unix(endDate).format('MM DD YYYY, h:mm a');
        const then = moment(date, 'MM DD YYYY, h:mm a');
        const now = moment();
        const countdown = moment(then - now);
        const daysFormat = countdown.format('D');
        const hoursFormat = countdown.format('HH');
        const minutesFormat = countdown.format('mm');
        const secondsFormat = countdown.format('ss');

        setDays(`${daysFormat} days`);
        setHours(hoursFormat);
        setMinutes(minutesFormat);
        setSeconds(secondsFormat);

        return () => {
          clearInterval(interval.current);
          interval.current = null;
        };
      }, 1000);
    }, []);

    return (
      <WrappedComponent
        days={days}
        hours={hours}
        minutes={minutes}
        seconds={seconds}
        {...props}
      />
    );
  };

  return Event;
}

Jeśli spróbuję naśladować jasne z innego miejsca, dodając kolejny useEffect tuż pod ostatnim, na przykład:

  useEffect(() => {
    setTimeout(() => clearInterval(interval.current), 15000)
  }, [])

Ostrzeżenie znika, ale odliczanie nie będzie już działać. Jak więc to naprawić, aby nie wpływać na odliczanie i usunąć ostrzeżenie?

2
Valerxx22 3 kwiecień 2020, 11:33

3 odpowiedzi

Najlepsza odpowiedź

Funkcja porządkująca dla podpięcia useEffect [1] musi zostać zwrócona z funkcji, którą przekazujesz useEffect. Zwracasz swoją funkcję porządkującą w funkcji, którą przekazujesz setInterval.

useEffect(() => {
  interval.current = setInterval(() => {
    const date = moment.unix(endDate).format('MM DD YYYY, h:mm a');
    const then = moment(date, 'MM DD YYYY, h:mm a');
    const now = moment();
    const countdown = moment(then - now);
    const daysFormat = countdown.format('D');
    const hoursFormat = countdown.format('HH');
    const minutesFormat = countdown.format('mm');
    const secondsFormat = countdown.format('ss');

    setDays(`${daysFormat} days`);
    setHours(hoursFormat);
    setMinutes(minutesFormat);
    setSeconds(secondsFormat);
  }, 1000);

  // move clean up function to here:
  return () => {
    clearInterval(interval.current);
    interval.current = null;
  };
}, []);

[1] https://reactjs.org/docs/hooks-effect.html

1
sdgluck 3 kwiecień 2020, 08:45

Nie potrzebujesz createRef do effects. a powrót powinien być after the interval.

useEffect(() => {
      const timer = setInterval(() => {
        const date = moment.unix(endDate).format('MM DD YYYY, h:mm a');
        const then = moment(date, 'MM DD YYYY, h:mm a');
        const now = moment();
        const countdown = moment(then - now);
        const daysFormat = countdown.format('D');
        const hoursFormat = countdown.format('HH');
        const minutesFormat = countdown.format('mm');
        const secondsFormat = countdown.format('ss');

        setDays(`${daysFormat} days`);
        setHours(hoursFormat);
        setMinutes(minutesFormat);
        setSeconds(secondsFormat);

      }, 1000);

       return () => {
          clearInterval(timer);
        };
    }, []);
0
xdeepakv 3 kwiecień 2020, 08:40
useEffect(() => {
      interval.current = setInterval(() => {
        const date = moment.unix(endDate).format('MM DD YYYY, h:mm a');
        const then = moment(date, 'MM DD YYYY, h:mm a');
        const now = moment();
        const countdown = moment(then - now);
        const daysFormat = countdown.format('D');
        const hoursFormat = countdown.format('HH');
        const minutesFormat = countdown.format('mm');
        const secondsFormat = countdown.format('ss');

        setDays(`${daysFormat} days`);
        setHours(hoursFormat);
        setMinutes(minutesFormat);
        setSeconds(secondsFormat);
      }, 1000);

  // Attention : return function cleanup for the function used in useEffect()
  return () => {
      clearInterval(interval.current);
      interval.current = null;
    };
}, []);

Możesz zobaczyć moją pełną odpowiedź „Oczyść wycieki pamięci z niezamontowanego komponentu w React hookach” tutaj: https : //stackoverflow.com/a/59956926/4386148

0
SanjiMika 3 kwiecień 2020, 08:45