Реагировать: setTimeout не очищается в крючке useEffect

#javascript #reactjs

#язык JavaScript #реагирует на

Вопрос:

В настоящее время мое приложение переключается на /about страницу после 5 секунд вступления на /home странице. Я хочу прервать этот тайм-аут, если кто-то вручную изменит страницу.

Для этого у меня есть состояние introDisplayed , которое false по умолчанию. Нажав на ссылку в приложении introDisplayed , вы становитесь true

Почему параметр setTimeout в эффекте использования не очищается? Для справки я перечислил все мои попытки по этому вопросу.

пояснение: я попытался добавить introDisplayed только зависимости в useEffect, а также с history помощью и setIntroDisplayed в соответствии с предложением eslint, и в данном случае это ничего не меняет

 const Page = ({ introDisplayed, setIntroDisplayed }) =gt; {   const history = useHistory()   const location = useLocation()   // useEffect(() =gt; {  // if (introDisplayed === false) {  // setTimeout(() =gt; {  // setIntroDisplayed(true)  // history.push("/about")  // }, 5000)  // } else clearTimeout()  // })  // useEffect(() =gt; {  // if (introDisplayed === false) {  // var timer = setTimeout(() =gt; {  // setIntroDisplayed(true)  // history.push("/about")  // }, 5000)  // } else clearTimeout(timer)  // })  useEffect(() =gt; {  const timer = setTimeout(() =gt; {  setIntroDisplayed(true)  history.push("/about")  }, 1000)  if (introDisplayed === true) {  return () =gt; clearTimeout(timer)  }  })   return () }  

Комментарии:

1. Ваш useEffect должен включать introDisplayed в себя в качестве зависимости

2. Я пробовал добавлять introDisplayed самостоятельно, а также с history помощью и setIntroDisplayed в соответствии с предложением eslint, и в данном случае это ничего не меняет

Ответ №1:

Я думаю, вы просто забыли добавить зависимость в useEffect() .

 useEffect(() =gt; {  if(introDisplayed === true) return;  const timer = setTimeout(() =gt; {  setIntroDisplayed(true)  history.push("/about")  }, 1000)  return () =gt; clearTimeout(timer) }, [introDisplayed])  

Комментарии:

1. Спасибо, но, как написано выше: я пробовал добавлять introDisplayed самостоятельно, а также с history помощью и setIntroDisplayed в соответствии с предложением eslint, и в данном случае это ничего не меняет

2. Моя ошибка, ваш код действительно работает, извините! Сначала я не заметил ничего, что отличалось бы от моего, кроме зависимости! Большое спасибо