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

您可以使用lodash中的groupBy助手

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]} />
   ))
}

ReactJS来自一个数据数组/ JSON /来自数据库的请求中的许多表

1 个答案: