在反应中渲染哈希图数据答案

【问题标题】：render hashmap data in react在反应中渲染哈希图数据
【发布时间】：2021-10-20 01:09:25
【问题描述】：

我正在将 api 中的 hashmap 数据检索到我的 react 应用程序中。数据看起来像这样..

[
    [
        "d243dc7-6fe8-151b-4ca8-1be528f2b36",
        "[\"Jonny\",70]"
    ],
    [
        "8affa17-76d1-13e-6380-7cd2a3e3647",
        "[\"Lucy\",106,"pic3.jpg"]"
    ],
    [
        "841cb28-24c7-872-3c66-63253800c8d",
        "[\"Mike\",0]"
    ],
    [
        "6128e-182-cfb4-708b-c40a3ba2e6e",
        "[\"Elodie\",23,"me.jpg"]"
    ],
    [
        "e55ef4c-8d41-3be4-27d-aae53330584",
        "[\"Jacob\",9,"img-004.jpeg"]"
    ]
]

我需要将这些数据呈现到表格中。

使用 map 和 with data.slice(0, 1) 我已经成功提取了密钥（长字符串），但我需要帮助将名称、编号和可选图像分开。我尝试使用各种运算符进行试验。我认为这会工作

{data.slice(1, 2).toString().substring(2,data.slice(1, 2).length-2)}

但它只返回 ["

我希望有一个更简单的方法来做到这一点！

【问题讨论】：

标签： javascript reactjs hashmap

【解决方案1】：

{data.slice(1, 2).toString().substring(2,data.slice(1, 2).length-2)}
                                       ^ ^^^^^^^^^^^^^^^^

在字符串 "["Jonny",70]" 中，你只想跳过第一个字符 "["，所以 substring() 的第一个参数应该是索引 1
您忘记将 data.slice(1, 2) 传输到字符串，所以它仍然是一个数组，其长度为 1

所以你的代码应该修改为：

data.slice(1, 2).toString().substring(1, data.slice(1, 2).toString().length - 2)

【讨论】：

【解决方案2】：

您以一种奇怪的格式显示数据，但这有效：

const data = [
    [
        "d243dc7-6fe8-151b-4ca8-1be528f2b36",
        "[\"Jonny\",70]"
    ],
    [
        "8affa17-76d1-13e-6380-7cd2a3e3647",
        "[\"Lucy\",106,\"pic3.jpg\"]"
    ],
    [
        "841cb28-24c7-872-3c66-63253800c8d",
        "[\"Mike\",0]"
    ],
    [
        "6128e-182-cfb4-708b-c40a3ba2e6e",
        "[\"Elodie\",23,\"me.jpg\"]"
    ],
    [
        "e55ef4c-8d41-3be4-27d-aae53330584",
        "[\"Jacob\",9,\"img-004.jpeg\"]"
    ]
];

const data1 = JSON.parse(data.slice(1, 2)[0][1]);

console.log('name', data1[0]);
console.log('numb', data1[1]);
console.log('file', data1[2]);

【讨论】：