React中渲染非结构化数据最合适的方式

Question

我有一个 returns 非结构化数据的后端（另一个开发人员负责后端），我不知道如何最合适地呈现它，有什么想法吗？

我已经尝试过用这个库渲染它react-json-view但是它不是很友好。

这是我收到的数据示例：

[
{
    "conditions": [
        "SIN_SALDO"
    ],
    "typeItem": "MSISDN",
    "createdDate": 1639677563,
    "data": {
        "msisdn": "571345543122"
    },
    "planName": "PRE_PAGO",
    "backendName": "backofficeco",
    "pk": "#CO#MSISDN#MI_tienda#backofficeco#cbb1efe963",
    "country": "CO",
    "resourceGroup": "MI_tienda"
},
{
    "typeItem": "MSISDN",
    "createdDate": 1644521244,
    "data": {
        "MSISDN": "asdfk"
    },
    "backendName": "adfs;fk",
    "pk": "#CO#MSISDN#asdf#adfs;fk#7578238817",
    "country": "CO",
    "resourceGroup": "asdf"
},
{
    "conditions": [
        "SIN_SALDO"
    ],
    "typeItem": "MSISDN",
    "createdDate": 1644940771,
    "data": {
        "msisdn": "3007279930"
    },
    "planName": "POS_PAGO",
    "backendName": "backofficeco",
    "pk": "#CO#MSISDN#MI_tienda#backofficeco#25831ae7cf",
    "country": "CO",
    "resourceGroup": "MI_tienda"
},
{
    "conditions": [
        "SIN_SALDO"
    ],
    "typeItem": "MSISDN",
    "createdDate": 1644420646,
    "data": {
        "msisdn": "571345543122"
    },
    "planName": "adfasdf",
    "backendName": "backofficeco",
    "pk": "#CO#MSISDN#asdfasdf#backofficeco#c30d28f552",
    "country": "CO",
    "resourceGroup": "MI_tienda"
},
{
    "typeItem": "MSISDN",
    "createdDate": 1644525223,
    "data": {
        "MSISDN": "asdfasd"
    },
    "backendName": "asdfasdf",
    "pk": "#CO#MSISDN#asdfasdf#asdfasdf#02ac5aa61b",
    "country": "CO",
    "resourceGroup": "asdfasdf"
},
{
    "conditions": [
        "adsfas"
    ],
    "typeItem": "MSISDN",
    "createdDate": 1646230406,
    "data": {
        "msisdn": "571345543122"
    },
    "planName": "adfasdf",
    "backendName": "backofficeco",
    "ttl": 1646835206,
    "pk": "#CO#MSISDN#MI_tienda#backofficeco#cd40ee06af",
    "country": "CO",
    "resourceGroup": "adsfa"
}

]

Answer 1

假设您只想渲染列表，您可以尝试根据某个键（可能是 'pk'）创建一个地图并将其传递给网格。

React中渲染非结构化数据最合适的方式

The most appropiate way to render unstructured data in react

json

data-structures

reactjs