ReactJS много таблиц из одного массива данных / JSON / запрос от БД

Question

Я новичок в React, и мне нравится строить такие же таблицы на моем фронте с такими данными

Пример данных из MongoDB:

{name:"flower1", price: 5, quantity: 34, color:"red"}
{name:"flower2", price: 4, quantity: 57, color:"blue"}
{name:"flower3", price: 6, quantity: 56, color:"white"}
{name:"flower4", price: 6, quantity: 56, color:"red"}
{name:"flower5", price: 8, quantity: 56, color:"blue"}

, но только с одним type в каждой таблице

Структура таблицы:

{table_name_by_color_from_DB}
Name | Price | Quantity

Например, у меня есть 3 разных цвета, поэтому должно быть три таблицы. Я мог бы легко создавать таблицы в React, но каждый раз, когда я хочу создать таблицу, я должен запрашивать данные из Mongo. Если у меня есть 10 цветов, я должен создать 10 таблиц, и я боюсь, что это будет слишком много запросов. Так что же лучше делать? Могу ли я просто запросить Mongo один раз, а затем отделить данные от ответа для каждой таблицы по цвету с помощью .map? Может ли кто-нибудь дать совет или фрагмент кода для этого?

Answer 1

вы можете использовать помощник groupBy из lodash

groupBy(data, 'color') 

реструктурирует ваши данные в

{
    red: [
        {name:"flower1", price: 5, quantity: 34, color:"red"},
        {name:"flower4", price: 6, quantity: 56, color:"red"}
    ],
    blue: [
        {name:"flower2", price: 4, quantity: 57, color:"blue"},
        {name:"flower5", price: 8, quantity: 56, color:"blue"}
    ],
    white: [
        {name:"flower3", price: 6, quantity: 56, color:"white"}
    ]
}

и вы можете отобразить это в свой компонент таблицы

{
   Object.keys(data).map(color => (
       <TableComponent data={data[color]} />
   ))
}