使用reactJS显示动态数组列表

Question

我正在使用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
}
}
]
}

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

Answer 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>
);