数组上的映射函数抛出未定义的错误答案

【问题标题】：map function on an array throwing undefined error数组上的映射函数抛出未定义的错误
【发布时间】：2021-04-24 18:52:41
【问题描述】：

尝试在数组上调用 map 函数时抛出未定义的错误。有人可以帮我解决这个问题。我附上了失败的示例反应代码。

<div className="main-side-bar">
  <ul>
    {SideBarItems.length != 0 &&
      SideBarItems.filter((data) => data.linkName == moduleName).map((data) => {
        return (
          <>
            <li>
              <h4 className="side-bar-section-header">{data.pageName}</h4>
            </li>
            {data.sideBarLinkNames.map((items) => {
              return (
                <>
                  <li>
                    <h5>{items.sectionName}</h5>
                    <ul className="side-bar-section-header-links">
                      {items.sectionLinks.map((sectionLinks) => {
                        return (
                          <>
                            <li>
                              <Link
                                onClick={() =>
                                  clikedSideBarLink(
                                    sectionLinks.resourceId,
                                    items.sectionName
                                  )
                                }
                                href="#"
                              >
                                {sectionLinks.linkName}
                              </Link>
                            </li>
                          </>
                        );
                      })}
                    </ul>
                  </li>
                </>
              );
            })}
          </>
        );
      })}
  </ul>
</div>;

【问题讨论】：

你能提供一些代码吗？
@FireFighter 我已附上代码
错误是什么？ undefined 是什么？
它在下一行失败并出现未定义的错误。
{data.pageName}
那么每个数据对象可能都没有sideBarLinkNames 属性。您是否为每个数据对象绑定了 sideBarLinkNames 日志记录？

标签： javascript node.js reactjs

【解决方案1】：

我在 firebase 中组织数据的方式是错误的。我是新的 javascript，它对我来说是一个新的学习。感谢所有花时间提供帮助的人。

@FireFighter 感谢您指出错误。我花了一些时间通过调试来调查这个问题，最终发现了错误。下面是sideBarLinkNames字段的新数据格式。

【讨论】：