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

所以，订阅数据是动态的。我如何在表格数据中显示上述数据，如下所示：Mock 用户可以订阅任意数量的产品。截至目前，我们没有订阅超过 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>
);

使用 reactJS 显示动态数组列表

Display dynamic arraylist using reactJS

javascript

reactjs

react-native

react-data-grid