React-映射.filter.map的最有效方式

Question

我有以下一些react代码。我有一个组的数组和一个具有相应组的菜单项的数组。我想像这样按组显示菜单项。。。

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

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

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, [])
};

Answer 2

试试这个解决方案。使用reduce((，可以将结果作为map和filter的组合。

groups.GroupDetail.map(group => {
return (
menuList.reduce((filtered, menuItem) => { 
if (menuItem.group == group.name) {
filtered.push(<p style={{ width: '100%' }}>{item.name}</p>)
}
return filtered;
}, [])
)
})

Answer 3

如果您使用hook，您可以使用带有menuItems或/和groups的useMemo作为依赖项(取决于您的代码(，并且您可以保存"备忘录"；组件，并在这些值中的任何值发生更改时进行预计算。

如果创建一个以menuItems和groups为参数的组件，则可以获得相同的效果(并且只有在两个变量中的任何一个发生更改时才会重新渲染(