Можно ли отменить подписку из setCounter с помощью функции очистки в ловушке useEffect? - PullRequest
Новая
       7

Можно ли отменить подписку из setCounter с помощью функции очистки в ловушке useEffect?

0 голосов
/ 08 апреля 2020

Я сделал простую анимацию с помощью setTimeout, но в консоли появляется красное предупреждение:

1 Предупреждение. Невозможно выполнить обновление состояния React на отключенном компоненте. Это неоперация, но она указывает на утечку памяти в вашем приложении. Чтобы исправить, отмените все подписки и асинхронные задачи в функции очистки useEffect. в доме (создан Context.Consumer) 

  useEffect(() => {
    counter > 0 && setTimeout(() => setCounter(counter - 1), 1000);
    if (counter <= 16 && counter > 8) {
      setFlexStyle({
        width: "100%",
        float: "left",
        marginright: "-100%",
        position: "relative",
        display: "list-item",
      });
      setClassStyle("flex-active-slide");
      setFlexStyle2({
        width: "100%",
        float: "left",
        marginright: "-100%",
        position: "relative",
        display: "none",
      });
      setClassStyle2("");
    } else if (counter <= 8 && counter > 0) {
      setFlexStyle({
        width: "100%",
        float: "left",
        marginright: "-100%",
        position: "relative",
        display: "none",
      });
      setClassStyle("");
      setFlexStyle2({
        width: "100%",
        float: "left",
        marginright: "-100%",
        position: "relative",
        display: "list-item",
      });
      setClassStyle2("flex-active-slide");
    } else {
      setCounter(16);
    }
  }, [counter]);

1 Ответ

1 голос
/ 08 апреля 2020 
useEffect(() => {
  const timer = counter > 0 ? setTimeout(() => setCounter(counter - 1), 1000) : null
  return () => clearTimeout(timer)
}, [counter] )

Попробуйте

...