ReactJS 来自一个数据数组/json/来自数据库的请求的许多表答案

【问题标题】：ReactJS many tables from one data array/json/request from DBReactJS 来自一个数据数组/json/来自数据库的请求的许多表
【发布时间】：2019-09-04 20:12:02
【问题描述】：

我是 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 按颜色将每个表的数据与响应分开吗？有人可以为此提供建议或code-sn-p吗？

【问题讨论】：

不要给reactjs增加负担。而是从 nodejs 以结构化格式获取表数据。您的 API 应该为每种颜色提供一个单独的数组，并为每个数组提供一个显示表。你的想法
是的，你说得对，一开始我也想过，但比这要复杂一些。它大约有 10 多种“颜色”，我应该从另一个集合中请求 DB 来接收用于创建表的结果数据。所以它已经是对 DB 的 [color x 2] 请求，但这里的关键问题是我写了很多数据（几乎是实时的）并且它有点加载。但是，就目前而言，我通过 API（按颜色）收到 X 个请求

标签： json node.js mongodb reactjs

【解决方案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]} />
   ))
}

【讨论】：