React中使用map遍历数组时如何仅渲染第一个对象元素？

我在React中遍历对象数组渲染Tab组件，所用数组如下：

const tabs = [
    {
        index: 0,
        title: 'v1',
        path: '/v1',
        component: versionManager,
    },
    {
        index: 1,
        title: 'v2',
        path: '/v2',
        component: version2Manager,
    },
    {
        index: 0,
        title: 'v3',
        path: '/v3',
        component: version3Manager,
    },
];

目前已经通过如下代码实现了整个数组的映射渲染：

{tabs.map((item) => {
           if (auth.verify(Roles.role1)) {
                   return (
                        <Tab
                             label={item.title}
                             key={item.index}
                             component={Link}
                             to={item.path}
                         />
                    );
// 省略后续逻辑

现在想要添加else逻辑，权限验证不通过时仅映射数组的第一个对象（v1）及其所有属性，尝试过item.title[0]、item.index[0]等写法都会报undefined错误，求最优实现方式。

错误原因 #

原有写法存在两个核心问题：

• 权限判断写在map遍历内部，会导致每一个数组元素都执行判断，哪怕走else分支也会返回和原数组长度相同的Tab元素，不符合仅渲染1个的需求
• item.title[0]是取单个tab的title字符串的第一个字符，item是遍历到的单个对象不是数组，自然取不到你想要的第一个tab的属性，数组的第一个元素要通过tabs[0]获取。

最优实现（推荐） #

先根据权限判断确定要渲染的数组范围，再做遍历，逻辑清晰易维护：

// 渲染前先确定要展示的tab列表
const showTabs = auth.verify(Roles.role1) ? tabs : [tabs[0]];

// JSX部分直接遍历处理后的数组即可
{showTabs.map((item) => (
  <Tab
    label={item.title}
    key={`${item.index}-${item.title}`} // 原数组index存在重复，组合title避免key重复警告
    component={Link}
    to={item.path}
  />
))}

精简写法 #

如果不想额外声明变量，也可以直接用数组slice方法截取：

{tabs
  .slice(0, auth.verify(Roles.role1) ? undefined : 1)
  .map((item) => (
    <Tab
      label={item.title}
      key={`${item.index}-${item.title}`}
      component={Link}
      to={item.path}
    />
  ))
}

slice方法第二个参数传1代表仅截取前1个元素，传undefined会截取到数组末尾，和渲染全部的效果一致。

内容的提问来源于stack exchange，提问作者Steve