如何在material-ui中进行分组自动完成

Question

假设我有一个像这样的对象数组。

const top100Films = [
  { title: 'The Shawshank Redemption', year: 19 },
  { title: 'The Godfather', year: 19 },
  { title: 'The Godfather: Part II', year: 19 },
  { title: 'The Dark Knight', year: 20 },
  { title: '12 Angry Men', year: 19 },
  { title: "Schindler's List", year: 20 },
  { title: 'Pulp Fiction', year: 20 },
  { title: 'The Lord of the Rings: The Return of the King', year: 20 },
  { title: 'The Good, the Bad and the Ugly', year: 19 },
  { title: 'Fight Club', year: 20 },
  { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 20 },
  { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 19 },
  { title: 'Forrest Gump', year: 19 },
  { title: 'Inception', year: 20 },
  { title: 'The Lord of the Rings: The Two Towers', year: 20 },
  { title: "One Flew Over the Cuckoo's Nest", year: 19 },
  { title: 'Goodfellas', year: 19 },
]

如何根据材料用户界面自动完成的年份对显示进行分组？我尝试过这个，但出现错误。

 <Autocomplete
      id="grouped-demo"
      options={top100Films.map(option) => option.title)}
      groupBy={(option) => option.year}
      getOptionLabel={(option) => option.title}
      style={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="With categories" variant="outlined" />}    
 />

Answer 1

options={options.sort((a, b) =>
        b.year.toString().localeCompare(a.year.toString())
      )}

将其放入自动完成功能中，然后您就可以对电影进行排序并按年份分组。但请确保所有代码均来自material-ui，或者仅将数组名称添加到选项中，无需使用地图