javascript - 我在菜单项上使用 react Hook 。我的第一次点击没有做任何事情，随后的点击按预期工作

Question

import React, { useState } from 'react';
import './menu.css';

const menuItems = [ 'Home', 'Rooms', 'Photos', 'About' ];

const MenuItems = () => {
    const [ toggle, setToggle ] = useState(false);
    const [ classOn, setClassOn ] = useState('');
    const [ hidden, setHidden ] = useState('hidden');

    function toggleOnMenu(event) {
        setToggle(!toggle);
        if (toggle) {
            setClassOn('on');
            setHidden('');
        } else {
            setClassOn('');
            setHidden('hidden');
        }
        event.preventDefault();
    }
    return (
        // menu-section
        <div onClick={(event) => toggleOnMenu(event)} className={classOn + ' menu-section'} style={{}}>
            {/* menu-toggle */}
            <div className={classOn + ' menu-toggle'} style={{}}>
                {/* one */}
                <div className="one" style={{}} />
                {/* two */}
                <div className="two" style={{}} />
                {/* three */}
                <div className="three" style={{}} />
            </div>
            <nav>
                <ul
                    role="navigation"
                    className={hidden}
                    style={{
                        // display: 'none'
                    }}
                >
                    {menuItems.map((menuItem) => {
                        return (
                            <li key={menuItem}>
                                <a href="/">{menuItem}</a>
                            </li>
                        );
                    })}
                </ul>
            </nav>
        </div>
    );
};

export default MenuItems;

我不知道这里有什么问题。当您第一次点击时，没有任何反应，但之后它就按预期工作了。一旦你刷新页面回到同样的问题。

所以我认为我在概念上有问题。我已经将代码重构为一个可行的替代方案，但如果有人知道原因，我将非常感谢帮助填补我的知识空白。

Answer 1

setToggle(!toggle); 在第一次触发时没有返回预期值，你必须等待更改，然后通过新的 toggle 决定你在做什么code>，但是 setToggle 不接受第二个参数/回调。 要修复您有两种选择:

• 使用useReducer()
• 使用 useEffect() 更改它