javascript - React - map.filter.map 的最有效方式

Question

我有以下反应代码。我有一组组和一组带有各自组的菜单项。我想像这样按组显示菜单项...

groups.GroupDetail.map(group => {
    return (
    menuList.filter(menuItems => { return menuItems.group == group.name }).map(item => {
      return <p style={{ width: '100%' }}>{item.name}</p>
    })
  )
})
              

是否有更有效的方法来遍历组并过滤相应的菜单项？我觉得应该有一个我可以使用的更高级别的 js 数组方法。

标签： javascriptreactjs

Answer 1

.filter其次.map是很好，但利用 ES6 箭头函数的隐式返回会更简洁：

groups.GroupDetail.map(
    ({ name }) => menuList
        .filter(({ group }) => group === name })
        .map(({ name }) => <p style={{ width: '100%' }}>{name}</p>)
};

reduce是一种选择，但我对此并不满意：

groups.GroupDetail.map(
    ({ detailName }) => menuList
        .reduce((a, { group, name }) => group === detailName ? [...a, <p style={{ width: '100%' }}>{name}</p>] : a, [])
};