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

Posted 2023-02-22

【中文标题】一段时间后在 Next.js 中隐藏一个元素

【英文标题】：Hiding an element after a while in Next.js

【发布时间】：2021-01-14 19:12:51

【问题描述】：

我有一个标题组件作为功能组件。我想在单击徽标文本时显示一个弹出窗口。一段时间后它应该会自动关闭。我使用钩子来显示弹出状态。但是设置状态函数在 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

控制台日志：

【参考方案1】：

让我建议，这是同一个问题：

React - useState - why setTimeout function does not have latest state value?

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

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

【参考方案2】：

它的发生是因为setPopupOpen 是异步的。因此，当setPopupOpen(!popupOpen) 被调用时，它与onClick 第一个setPopupOpen(!popupOpen) 具有相同的值，所以最终当它同时调用setPopup doing same state update 时，即都更新为false。更好的方法是使用setPopupOpen 回调函数来更新值。我添加了这段代码。

import  useState  from "react";
import Link from "next/link";
import style from "./style.module.css";

const Header = () => 
  const [popupOpen, setPopupOpen] = useState(false);

  const toggle = () => 
    setPopupOpen((prev) => !prev);
  ;
  const onClick = () => 
    setPopupOpen(!popupOpen);
    setTimeout(() => 
      toggle();
    , 1000);
  ;

  return (
    <header className=style.header>
      <nav className=style.nav>
        <div className=style.popupContainer onClick=onClick>
          <span className=style.logo>Logo</span>

          popupOpen && (
            <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 function IndexPage() 
  return (
    <div>
      <Header />
    </div>
  );

这里是演示：https://codesandbox.io/s/pedantic-haibt-iqecz?file=/pages/index.js:0-1212