在React中通过API

Question

我有从API端点获取的json数据。

        [{
            "id": 1,
            "style": "A",
            "color": "black",
            "size": "30",
            "quantity": "122.00"
        },
        {
            "id": 2,
            "style": "B",
            "color": "maroon",
            "size": "24",
            "quantity": "48.00"
        },...]

我知道我可以使用array.map（）遍历数据，并为我提供一个带有标题“ style”，“ color”，“ size”和“ quantity”的表，以及下面的相应数据行。

我想做的是将渲染转换为table format，因为它更易于阅读，而且还有一个很大的好处，那就是可以将单元格也进行编辑（例如，将数据绑定回状态）。具体来说，大小在列标题中。我该如何使用普通的react / javascript逻辑来做到这一点，或者甚至更好地使用具有此功能的流行React软件包？当前正在查看react-table和react-virtualized，但是对这些软件包没有足够的经验来做复杂的事情。一些代码将不胜感激。

Answer 1

这是我创建的表的图像。希望您正在寻找这个

这是项目的链接

https://github.com/AdnanShah/ReactJS-KretaHub-