Лучший метод данных с помощью таблиц Material-UI - PullRequest
Новая
       7

Лучший метод данных с помощью таблиц Material-UI

0 голосов
/ 13 июня 2018

У всех примеров в Material-UI v1 есть примеры таблиц, приведенные ниже в качестве примера формата данных в таблицах: 

data: [
  createData('Cupcake', 305, 3.7, 67, 4.3),
  createData('Donut', 452, 25.0, 51, 4.9),
  createData('Eclair', 262, 16.0, 24, 6.0),
  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
  createData('Gingerbread', 356, 16.0, 49, 3.9),
  createData('Honeycomb', 408, 3.2, 87, 6.5),
  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
  createData('Jelly Bean', 375, 0.0, 94, 0.0),
  createData('KitKat', 518, 26.0, 65, 7.0),
  createData('Lollipop', 392, 0.2, 98, 0.0),
  createData('Marshmallow', 318, 0, 81, 2.0),
  createData('Nougat', 360, 19.0, 9, 37.0),
  createData('Oreo', 437, 18.0, 63, 4.0),
]

Однако до v1 я мог сделать массив, подобный нижеЯ считаю более эффективным.Мой вопрос, как вы делаете это в v1, потому что кажется утомительным писать каждую строку как createData и т. Д. 

const tableData = [
  {
    name: 'John Smith',
    status: 'Employed',
    selected: true,
  },
  {
    name: 'Randal White',
    status: 'Unemployed',
  },
  {
    name: 'Stephanie Sanders',
    status: 'Employed',
    selected: true,
  },
  {
    name: 'Steve Brown',
    status: 'Employed',
  },
  {
    name: 'Joyce Whitten',
    status: 'Employed',
  },
  {
    name: 'Samuel Roberts',
    status: 'Employed',
  },
  {
    name: 'Adam Moore',
    status: 'Employed',
  },
];

1 Ответ

0 голосов
/ 13 июня 2018

Как вы можете видеть: 

let id = 0;
function createData(name, calories, fat, carbs, protein) {
  id += 1;
  return { id, name, calories, fat, carbs, protein };
}

что createData добавляет, добавляя идентификатор для значений таблицы

Это больше похоже на ваше мнение

этот идентификатор используется здесь: 

<TableRow key={n.id}>
 <TableCell component="th" scope="row">
   {n.name}
 </TableCell>
 <TableCell numeric>{n.calories}</TableCell>
 <TableCell numeric>{n.fat}</TableCell>
 <TableCell numeric>{n.carbs}</TableCell>
 <TableCell numeric>{n.protein}</TableCell>
</TableRow>

если вы используете данные из базы данных, то вы можете использовать ID из сгенерированной базы данных.

оба способа хороши, если толькоВам будет проще.

Если вы используете это только для целей тестирования, вы можете использовать 

{todos.map((todo, index) =>
  <Todo
    {...todo}
    key={index}
  />
)}

, но это не очень хорошая практика.читать дальше здесь: https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

...