时间戳

首页 > 解决方案 > React无法读取数组中的数组？

reactjs - React无法读取数组中的数组？

问题描述

我正在尝试在我的数组中呈现这个数组。这是我的数据文件

      export const SidebarData = [
        {
          title: 'Home',
          path: '/',
          icon: <AiIcons.AiFillHome />,
          cName: 'nav-text'
        },
        {
          title: 'Reports',
          path: '/reports',
          icon: <IoIcons.IoIosPaper />,
          cName: 'nav-text',
          subNav: [
            {
              title: 'Sub Reports',
              path: '/reports/subreports',
              cName2: 'subnav'
            },
            {
              title: 'Sub Reports 2',
              path: '/reports/subreports2',
              cName2: 'subnav'
            }
          ]
        }
 ]

这是我显示数据的代码

    {SidebarData.map((item, index) => {
          return (
            <li onClick={showSubnav} key={index} className={item.cName}>

             // Tried to render array in array, but says cannot read map of undefined

              <div className='subnav-menu'>
                {SidebarData.subNav.map((subItem, index) => {
                  return <div key={index}>{subItem.title}</div>;
                })}
              </div>


              <Link to={item.path}>
                {item.icon}
                <span>{item.title}</span>
              </Link>
            </li>
          );
        })}

这部分代码是我尝试在数组中显示数组，但不知道如何正确显示而不崩溃

       <div className='subnav-menu'>
                {SidebarData.subNav.map((subItem, index) => {
                  return <div key={index}>{subItem.title}</div>;
                })}
              </div>

我将如何渲染 subNav 数组数据？

标签： reactjs

解决方案

首先，您应该调用subNavof item，而不是SidebarData。此外，您应该在调用map()subNav 的方法时检查 subNav 是否未定义，因此如果未定义，则会发生错误。

<div className='subnav-menu'>
                {item.subNav && item.subNav.map((subItem, index) => {
                  return <div key={index}>{subItem.title}</div>;
                })}
              </div>

推荐阅读