reactjs - 一段时间后在 Next.js 中隐藏一个元素

Question

我有一个标题组件作为功能组件。我想在单击徽标文本时显示一个弹出窗口。一段时间后它应该会自动关闭。我使用钩子来显示弹出状态。但是设置状态函数在 setTimeout 函数中不起作用。如何解决这个问题？

import Link from 'next/link'
import style from './header.module.css'

const Header = () => {
  const [popupOpen, setPopupOpen] = React.useState(false)

  return (
    <header className={style.header}>
      <nav className={style.nav}>
        <div
          className={style.popupContainer}
          onClick={() => {
            setPopupOpen(!popupOpen)
            console.log(popupOpen)
            setTimeout(() => {
              console.log(popupOpen)
              setPopupOpen(!popupOpen)
              console.log(popupOpen)
            }, 1000)
          }}
        >
          <span className={style.logo}>Logo</span>

          <span
            className={`${style.popupText} ${
              popupOpen ? style.show : style.hide
            }`}
          >
            Popup Text
          </span>
        </div>

        <ul className={style.ul}>
          <li>
            <Link href='/'>
              <a>.home</a>
            </Link>
          </li>
          <li>
            <Link href='/contact'>
              <a>.contact</a>
            </Link>
          </li>
        </ul>
      </nav>
    </header>
  )
}

export default Header

控制台日志：

标签： reactjsreact-hooksnext.jssettimeoutshow-hide

Answer 1

让我建议，这与以下问题相同：

React - useState - 为什么 setTimeout 函数没有最新的状态值？

const _onClick = () => {
     setPopupOpen(!popupOpen);

     setTimeout(() => {
         setPopupOpen(popupOpen => !popupOpen)
     }, 2000);
};