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

Question

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

控制台日志：

Answer 1

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

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

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

Answer 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

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

Hiding an element after a while in Next.js

settimeout

show-hide

reactjs

next.js

react-hooks

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

Hiding an element after a while in Next.js

settimeout

show-hide

reactjs

next.js

react-hooks

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