反應：setTimeout 未在 useEffect 掛鈎中清除

Question

目前，我的應用在/home頁面上的介紹 5 秒后切換到/about頁面。 如果有人手動更改頁面，我想打破這個超時。

為此，我有一個 introDisplayed 的introDisplayed ，默認情況下為false 。 通過單擊應用程序中的鏈接， introDisplayed變為true

為什么 useEffect 中的 setTimeout 沒有清除？ 作為參考，我列出了我在這個問題上的所有嘗試。

澄清：我嘗試將introDisplayed單獨添加到 useEffect 中的依賴項，以及setIntroDisplayed建議的history和 setIntroDisplayed ，在這種情況下它不會改變任何東西

const Page = ({ introDisplayed, setIntroDisplayed }) => {

  const history = useHistory()

  const location = useLocation()

  // useEffect(() => {
  //   if (introDisplayed === false) {
  //     setTimeout(() => {
  //       setIntroDisplayed(true)
  //       history.push("/about")
  //     }, 5000)
  //   } else clearTimeout()
  // })
  // useEffect(() => {
  //   if (introDisplayed === false) {
  //     var timer = setTimeout(() => {
  //       setIntroDisplayed(true)
  //       history.push("/about")
  //     }, 5000)
  //   } else clearTimeout(timer)
  // })
  useEffect(() => {
    const timer = setTimeout(() => {
      setIntroDisplayed(true)
      history.push("/about")
    }, 1000)
    if (introDisplayed === true) {
      return () => clearTimeout(timer)
    }
  })

  return ()
}

Answer 1

我認為您剛剛忘記在useEffect()添加依賴項。

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