#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. Моя ошибка, ваш код действительно работает, извините! Сначала я не заметил ничего, что отличалось бы от моего, кроме зависимости! Большое спасибо