如何映射对象数组，对象中有数组

Question

我的问题在标题中有点难以解释。但作为反应，我正在尝试映射一个看起来像这样的元素

[
  { 
    logicLayer: { name: someName, etc }, 
    subComps: [ { name: anotherName, etc },{ name: anotherName, etc } ]
  },
  { 
    logicLayer: { name: someName, etc }, 
    subComps: [ { name: anotherName, etc },{ name: anotherName, etc } ]
  },
  etc
]

到下拉按钮菜单

// 这很好用

return (
        singular.buttonGroups.map(( buttonGroup, index1 ) =>
          buttonGroup.subComps.map(( subComp, index2 ) =>
            <MenuItem key={index2}><b>{buttonGroup.logicLayer.name}:</b> {subComp.name}</MenuItem>
          )
        )
      );

但我真正想做的是在它迭代内部数组之后放置一个“分隔符”.. 像这样

// 这不起作用

return (
        singular.buttonGroups.map(( buttonGroup, index1 ) =>
          buttonGroup.subComps.map(( subComp, index2 ) =>
            <MenuItem key={index2}><b>{buttonGroup.logicLayer.name}:</b> {subComp.name}</MenuItem>
          )
            <MenuItem divider></MenuItem>  // THIS LINE DOESN'T WORK
        )
      );

我怎样才能正确映射它，以便在它迭代其中一个对象的数组后放置一个分隔符？

编辑：如果有不需要我将其包装在 div 容器中的解决方案，那就太好了

Answer 1

你需要用一些容器包装它：

return (
    singular.buttonGroups.map(( buttonGroup, index1 ) =>
      <div> 
          {buttonGroup.subComps.map(
             ( subComp, index2 ) =>
                <MenuItem key={index2}><b>{buttonGroup.logicLayer.name}:</b> {subComp.name}</MenuItem>
          )}
          <MenuItem divider></MenuItem>  // THIS LINE DOESN'T WORK
      </div>
    )
  );