在React中，如果一个状态是一个空数组，那么如何有条件地呈现文本

Question

我想呈现"菜单为空"。否则，我就可以正确地映射和渲染来自api的json数据。

const Navbar = () => {
const [menu, setMenu] = useState([]);
if (menu === []) {
setMenu(["menu is empty"])
}
return (
<div className='nav-area'>
<Link to='/' className='logo'>LOGO</Link>
<ul className='menus'>
{menu.map((main) => (
<MenuItems items={main} key={main.type}/>
))}
</ul>
</div>
);
};
export default Navbar;

Answer 1

您可以使用内联If Else进行有条件渲染。

带条件运算符的内联If Else

示例：

const Navbar = () => {
const [menu, setMenu] = useState([]);
if (menu === []) {
setMenu(["menu is empty"])
}
return (
<div className='nav-area'>
<Link to='/' className='logo'>LOGO</Link>
<ul className='menus'>
{ menu.lenght < 1
? menu.map((main) => (
<MenuItems items={main} key={main.type}/>
))
: 'menu is empty'
}
</ul>
</div>
);
};
export default Navbar;

Answer 2

您可以简单地检查您的数组长度，并基于该呈现文本或带有项目的ul

像这样的东西：

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

return (
<div className='nav-area'>
<Link to='/' className='logo'>LOGO</Link>
{
menu.length > 0 ? (
<ul className='menus'>

{
menu.map((main) => (
<MenuItems items={main} key={main.type}/>
)) 
}

</ul>
)  : <>menu is empty</>
}

</div>
);
};
export default Navbar;

Answer 3

在这种情况下，有两种可能性，要么菜单为空，要么有一些数据。

在这种情况下，我要做的是通过.length属性检查数组是否为空的条件，以及通过Array.isArray方法检查如果不为空，那么它是否为数组。

如果两个条件都满足，则呈现内容；菜单为空；。像这样的

const Navbar = () => {
const [menu, setMenu] = useState([]);
return (
<div className="nav-area">
<Link to="/" className="logo">
LOGO
</Link>
{Array.isArray(menu) && menu.length ? (
<ul className="menus">
{menu.map((main) => (
<MenuItem items={main} key={main.type} />
))}
</ul>
) : (
// or you may have a component for this 
<h3>Menu is Empty</h3>
)}
</div>
);
};
export default Navbar;

Answer 4

使用react 的正确方法

import { useMemo } from "react";
const Navbar = () => {
const [menu, setMenu] = useState([]);
const displayMenus = useMemo(
() =>
{
if(menu.length === 0) return <div>EMPTY</div>
return menu.map(
(main) =>
{
return <MenuItems items={main} key={main.type}/>
}
)
},
[menu]
)
return (
<div className='nav-area'>
<Link to='/' className='logo'>LOGO</Link>
<ul className='menus'>
{displayMenus}
</ul>
</div>
);
};
export default Navbar;