reactjs - React 按钮 onClick 需要两次单击才能第二次工作

Question

当按下 img 时，侧面菜单可以正常打开，但是当我关闭侧面菜单并尝试通过按下 img 再次打开它时，需要单击两次才能打开。我该如何做到这一点，即使在我打开和关闭侧面菜单后，它也可以一键运行？

const Header = () => {
  let [isOpen, setIsOpen] = useState(false);
  return (
    <header className='homepage-header'>
        <img src={menusvg} alt='' onClick={() => setIsOpen((isOpen) => !isOpen)} />
        {
            isOpen ? <SideMenu /> : null
        }
        <h1>Main Header</h1>
    </header>
  )
}

注意:我在 SideMenu 组件内有另一个用于关闭菜单的按钮。

侧边菜单:

function SideMenu() {
  let [isOpen, setIsOpen] = useState(true);
  return (
    <>
        {
            isOpen ? <div className='side-menu'>
                <p>side menue</p>
                <i class="fas fa-times" onClick={() => setIsOpen((isOpen) => !isOpen)}></i>
            </div>
                : null
        }
    </>
  )
}

Answer 1

您正在使用两种不同的状态，将 isOpen 和 setIsOpen 作为 props 传递给 SideMenu

试试这个代码

function SideMenu({ isOpen, setIsOpen }) {
  return (
    <>
      {isOpen ? (
        <div className="side-menu">
          <p>side menue</p>
          <button onClick={() => setIsOpen(isOpen => !isOpen)}>Close</button>
        </div>
      ) : null}
    </>
  );
}

--

export default function App() {
  let [isOpen, setIsOpen] = React.useState(false);
  return (
      <header className="homepage-header">
        <img
          src={'https://picsum.photos/200'}
          alt=""
          onClick={() => setIsOpen(isOpen => !isOpen)}
        />
        {isOpen ? <SideMenu isOpen={isOpen} setIsOpen={setIsOpen} /> : null}
        <h1>Main Header</h1>
      </header>
  );
}

示例代码:https://stackblitz.com/edit/react-j4rxot?file=src%2FApp.js