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

Question

我的问题在标题中有点难以解释。但在 react 中，我试图映射一个看起来像这样的元素

[
  { 
    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>
    )
  );