arrays - 如何根据类别和元素的键进行排序以显示

Question

我很难找到解决方案。

现在，我正在构建一个带有反应的应用程序。

在其中一个页面中，我需要向用户询问来自预定义选项的多个输入。

例如

或者

问题是预定义的选项可能总是会改变。它可能是完全不同的国家食物。

每当使用选择一个选项时，我都会在声明的数组中添加选项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 
  })
}

我认为创建一个包含独特食物类别作为元素的新数组会有所帮助，但在这一步之后我仍然无法弄清楚。

请有人为我提供解决方案。

非常感谢您提前。

Answer 1

如果你想对食物和水平进行分类。

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)