Как указать row id property для компонента DataGrid MaterialUI?

Question

[Thrashches]

Пытаюсь воспользоваться компонентом DataGrid из MaterialUI в своем ReactJS проекте. При попытке отобразить данные в таблице получаю ошибку:

Unhandled Rejection (Error): Material-UI: The data grid component requires all rows to have a unique id property.
A row was provided without id in the rows prop:
[{"id":1,"title":"test","comment":"test problem","status":"OPEN"},{"id":2,"title":"another","comment":"another problem","status":"OPEN"}

Все делаю по образцу из официальной документации к Material, только rows получаю из rest-api. Django-Rest-Framework выдает мне следующий json:

{
    "tickets": [
        {
            "id": 1,
            "title": "test",
            "comment": "test problem",
            "status": "OPEN"
        },
        {
            "id": 2,
            "title": "another",
            "comment": "another problem",
            "status": "OPEN"
        },
        {
            "id": 3,
            "title": "another ticket about problem",
            "comment": "problem description",
            "status": "open"
        },
        {
            "id": 4,
            "title": "just another ticket about problem",
            "comment": "problem description",
            "status": "open"
        }
    ]
}

Через ul/li работать с данными получается, но через красивую табличку нет.
Код компонента:

render () {
    const {error, isLoaded, items} = this.state;

    const columns = [
      { field: 'id', headerName: 'ID', width: 70 },
      { field: 'title', headerName: 'Title', width: 130 },
      { field: 'user.username', headerName: 'Username', width: 130 },
      { field: 'status', headerName: 'Status', width: 90 }
    ];

    const rows = [items.map(item => item)];
    


    if (error) {
      return <Typography variant="h6" color="error">{error.message}</Typography>;
    } else if (!isLoaded) {
      return <Typography variant="h6" color="secondary">Loading...</Typography>;
    } else {
      /*return (
        <ul>
          {items.map(item => (
            <li>{item.id} {item.title}</li>
            )
          )}
        </ul>
      );*/
      console.log(rows);
      return <DataGrid rows={rows} columns={columns}></DataGrid>;
    }
  }

Как указать DataGrid что id строки это поле "id"? И как быть в случае подобных вложенностей, когда мне от объекта user нужен только его username?

"tickets": [
        {
            "id": 1,
            "title": "test",
            "comment": "test problem",
            "status": "OPEN",
            "user": {
                "id": 2,
                "username": "notadmin",
                "first_name": "",
                "last_name": "",
                "email": ""
            }
        },
        {
            "id": 2,
            "title": "another",
            "comment": "another problem",
            "status": "OPEN",
            "user": {
                "id": 1,
                "username": "admin",
                "first_name": "",
                "last_name": "",
                "email": ""
            }
        }
]

Answer 1

[0xD34F]

const rows = [items.map(item => item)];

Что это и зачем? Вы явно не понимаете, что здесь делаете. Передавайте items в DataGrid как есть, не надо ерундой заниматься.

И как быть в случае подобных вложенностей, когда мне от объекта user нужен только его username?

А как же

Все делаю по образцу из официальной документации к Material

??

Там, в документации, есть пример того, как следует подсовывать значения, отсутствующие непосредственно в объекте строки. Добавьте в определение колонки valueGetter: params => params.row.user.username.