我在菜单项上使用React钩子.我的第一次点击无需做任何事情，随后的点击按预期工作

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正在做什么，但是setToggle不接受第二个参数/打回来。要解决您有两个选择：

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

Answer 2

以防有人想知道我的重构代码，这是

import React, { useState } from 'react';
import './menu.css';
const menuItems = [ 'Home', 'Rooms', 'Photos', 'About' ];
const MenuItems = () => {
    const [ toggle, setToggle ] = useState(false);
    function toggleOnMenu(event) {
        setToggle(!toggle);
        event.preventDefault();
    }
    return (
        // menu-section
        <div onClick={(event) => toggleOnMenu(event)} className={(toggle ? 'on' : '') + ' menu-section'} style={{}}>
            {/* menu-toggle */}
            <div className={(toggle ? 'on' : '') + ' menu-toggle'} style={{}}>
                {/* one */}
                <div className="one" style={{}} />
                {/* two */}
                <div className="two" style={{}} />
                {/* three */}
                <div className="three" style={{}} />
            </div>
            <nav>
                <ul role="navigation" className={toggle ? '' : 'hidden'} style={{}}>
                    {menuItems.map((menuItem) => {
                        return (
                            <li key={menuItem}>
                                <a href="/">{menuItem}</a>
                            </li>
                        );
                    })}
                </ul>
            </nav>
        </div>
    );
};
export default MenuItems;

Answer 3

上面的实现违反了详尽的依赖性规则：函数内部引用的每个值也应显示在依赖项数组中。这是确保回调内的值始终是最新的，并避免与之相关的任何错误所必需的。

import React, { useState, useCallback } from 'react';
import './menu.css';
const menuItems = [ 'Home', 'Rooms', 'Photos', 'About' ];
const MenuItems = () => {
    const [ toggle, setToggle ] = useState(false);
  const toggleOnMenu = useCallback(() => setToggle(state => !state), [toggle]);
    return (
        // menu-section
        <div onClick={toggleOnMenu} className={(toggle ? 'on' : '') + ' menu-section'} style={{}}>
            {/* menu-toggle */}
            <div className={(toggle ? 'on' : '') + ' menu-toggle'} style={{}}>
                {/* one */}
                <div className="one" style={{}} />
                {/* two */}
                <div className="two" style={{}} />
                {/* three */}
                <div className="three" style={{}} />
            </div>
            <nav>
                <ul role="navigation" className={toggle ? '' : 'hidden'} style={{}}>
                    {menuItems.map((menuItem) => {
                        return (
                            <li key={menuItem}>
                                <a href="/">{menuItem}</a>
                            </li>
                        );
                    })}
                </ul>
            </nav>
        </div>
    );
};
export default MenuItems;