arrays - 如何根据类别和元素的键进行排序以显示
问题描述
我很难找到解决方案。
现在,我正在构建一个带有反应的应用程序。
在其中一个页面中,我需要向用户询问来自预定义选项的多个输入。
问题是预定义的选项可能总是会改变。它可能是完全不同的国家食物。
每当使用选择一个选项时,我都会在声明的数组中添加选项useState()
const [selectedFoods, setSelectedFoods] = useState([], []);
当添加新食物时,它看起来像这样
[
0: {id:3, food: "Western food", level: 1 },
1: {id:7, food: "Italian food", level: 2 },
2: {id:1, food: "Chinese food", level: 2 },
3: {id:6, food: "Italian food", level: 1 },
4: {id:0, food: "Chinese food", level: 1 },
]
现在的问题是,我总是在最后添加新元素。它根本没有排序。
当我添加一个新选项时,我想在选择下拉框下显示如下...
Chinese Food:
Chinese Food: level1, Chinese Food: level2
Italian Food:
Italian Food: level1, Italian Food: level2
Western Food:
Western Food: level1
我想做的是创建一个组件,该组件将数组作为道具并填充每个食物级别
const FoodComponent = () => {
return (
<div>
<h3>{props.title}</h3>
<div>
<span>{props.title}: </span>{props.contents.map(content => content.id)}
</div>
</div>
)
}
并遍历数组,但根据元素的级别和类别进行排序
{
selectedFoods.map(food => {
// call the component that created above
})
}
我认为创建一个包含独特食物类别作为元素的新数组会有所帮助,但在这一步之后我仍然无法弄清楚。
请有人为我提供解决方案。
非常感谢您提前。
解决方案
如果你想对食物和水平进行分类。
var arr=[
{id:3, food: "Western food", level: 1 },
{id:7, food: "Italian food", level: 2 },
{id:1, food: "Chinese food", level: 2 },
{id:6, food: "Italian food", level: 1 },
{id:0, food: "Chinese food", level: 1 },
]
arr.sort((a,b)=>a.food>b.food?1:-1).sort((c,d)=>c.level>d.level?1:-1).sort((a,b)=>a.food>b.food&&a.level<b.level?1:-1)
console.log(arr)
推荐阅读
- javascript - 在表格中的按钮上设置可见性开/关
- session - 如何使用 hazelcast 会话复制获取 jetty servlet 中的所有会话?
- c# - 使用扩展方法时通过引用更改值
- android - 在 FragmentPagerAdapters 中,我应该使用带有标签的 FragmentManager,还是只使用 HashMap
? - sql-server - 无法在报表视图中加载客户端打印控件
- gams-math - 在 GAMS 中使用辛普森积分规则的问题
- angular - 如何附加标头以在 Angular 2 中获取 http?
- python - 将嵌套的 json 文件列表转换为 pandas 数据框
- sharepoint - Microsoft Graph 破坏 SharePoint 列表编号列值
- perl - 另一个数组中的数组perl