使用 reactJS 显示动态数组列表答案

【问题标题】：Display dynamic arraylist using reactJS使用 reactJS 显示动态数组列表
【发布时间】：2020-12-12 15:44:06
【问题描述】：

我正在使用 reactJS 构建一个 Web 应用程序。我们应该显示用户订阅的产品。每个用户订阅的产品数量不同。例如，这里是响应：

 {
    "data" : [
        {
          "user": "user1",
          "subscriptions": 
          {
           "user1_product_1" : 20,
           "user1_product_2": 25
          }
        },
        {
            "user": "user2",
            "subscriptions": {
            "user2_product_1": 30,
            "user2_product_2": 25,
            "user2_product_3": 50,
            "user2_product_4": 50
          }
        }
      ]
}

因此，订阅数据是动态的。如何在表格数据中显示上述数据，如下所示：Mock 用户可以订阅任意数量的产品.. 目前我们没有订阅超过 4 个产品的用户。

【问题讨论】：

标签： javascript reactjs react-native react-data-grid

【解决方案1】：

首先，您的数据是一团糟，而且结构不正确。先纠正它，然后这应该可以帮助你：

let data = [
  {
    user: "user1",
    subscriptions: {
      user1_product_1: 20,
      user1_product_2: 25,
    },
  },
  {
    user: "user2",
    subscriptions: {
      user2_product_1: 30,
      user2_product_2: 25,
      user2_product_3: 50,
      user2_product_4: 50,
    },
  },
];

const TabularData = (props) => (
  <table>
    {props.data.map((user) => (
      <tr>
        {Object.keys(user.subscriptions).map((user_product) => (
          <td>{user.subscriptions[user_product]}</td>
        ))}
      </tr>
    ))}
  </table>
);

【讨论】：