React中状态为空数组时，如何实现文本的条件渲染？

DevOps 小满

2026-8-21

原代码的问题

数组判断错误：menu === []永远不会成立，因为数组是引用类型，即便都是空数组，它们的内存地址也不一样，正确的判断方式是检查menu.length === 0
无限渲染循环：在组件函数体直接调用setMenu，会触发组件重新渲染，渲染后又会执行这段判断，陷入无限循环
逻辑偏离需求：需求是空数组时渲染文本，不是把状态改成包含文本的数组，原做法会导致后续map渲染的是这个文本字符串，不符合预期

正确实现代码

const Navbar = () => {
    const [menu, setMenu] = useState([]);

    // 若需从API获取菜单数据，可在此添加请求逻辑
    // useEffect(() => {
    //   fetch('/api/menu')
    //     .then(res => res.json())
    //     .then(data => setMenu(data))
    //     .catch(err => console.error(err));
    // }, []);

    return (
        <div className='nav-area'>
            <Link to='/' className='logo'>LOGO</Link>
            <ul className='menus'>
                {/* 条件渲染：数组为空时显示文本，否则渲染菜单 */}
                {menu.length === 0 ? (
                    <li>menu is empty</li>
                ) : (
                    menu.map((main) => (
                        <MenuItems items={main} key={main.type}/>
                    ))
                )}
            </ul>
        </div>
    );
};

export default Navbar;