Как перебрать группу данных и вернуться в виде списка

Question

У меня есть такие данные

0: {rowid: "4b531532a5a9", groups: "Group1", descriptions: "Item1"......}
1: {rowid: "e55315ccabb5", groups: "Group2", descriptions: "Item2"......}
2: {rowid: "f27135283089", groups: "Group1", descriptions: "Item3"......}

Мне нужно показать это вот так https://codesandbox.io/s/material-demo-fwi6f?file= / demo. js

Итак, во-первых, когда Я получаю данные из API, сначала я делаю это ниже (groupBy - это метод loda sh, который передает данные и группы по свойству)

let list = groupBy(response.data, "groups");
      this.setState({
        Groups: Object.keys(list),
        BackOffice: response.data,
      });

Таким образом я получаю все имена групп и данные, сохраненные в состоянии . Затем у меня есть код ниже, чтобы создать полный список, но я не уверен, почему он не работает ..

GetBackOffice = () => {
    return (
      <Grid item xs={12}>
        <List dense style={{ padding: 0, margin: 0 }}>
          {this.GetList()}
        </List>
      </Grid>
    );
  };

  GetList = () => {
    let list = "";
    this.state.Groups &&
      this.state.Groups.map((EachGroup) => {
        let CurrentData = this.state.BackOffice.filter(
          (row) => row.groups === EachGroup
        );
        list += CurrentData.map((row) => (
          <ListItem>
            <ListItemText primary="1" />
            <ListItemSecondaryAction>
              <IconButton edge="end" aria-label={row.descriptions}>
                <DownloadIcon />
              </IconButton>
            </ListItemSecondaryAction>
          </ListItem>
        ));
      });

    return list;
  };

Answer 1

https://codesandbox.io/s/material-demo-w5dl3 Использование flatMap для сглаживания массива при сопоставлении

GetList = () =>
  this.state.Groups &&
  this.state.Groups.flatMap(EachGroup => {
    let CurrentData = this.state.BackOffice.filter(
      row => row.groups === EachGroup
    );
    return CurrentData.map(row => (
      <ListItem>
        <ListItemText primary="1" />
        <ListItemSecondaryAction>
          <IconButton edge="end" aria-label={row.descriptions}>
            <DownloadIcon />
          </IconButton>
        </ListItemSecondaryAction>
      </ListItem>
    ));
  });

https://codesandbox.io/s/material-demo-x7edo Я бы рекомендовал использовать возвращаемый объект groupBy напрямую с Object.values ​​() (или Object.entries ()) и не фильтровать каждый раз по ключу:

  GetData = () => {
    const Groups = groupBy(response.data, "groups");
    this.setState({
      Groups
    });
  };

  GetList = () =>
    this.state.Groups &&
    Object.values(this.state.Groups).map(CurrentData => {
      return CurrentData.map(row => (
        <ListItem key={row.rowid}>
          <ListItemText primary="1" />
          <ListItemSecondaryAction>
            <IconButton edge="end" aria-label={row.descriptions}>
              <DownloadIcon />
            </IconButton>
          </ListItemSecondaryAction>
        </ListItem>
      ));
    });