React中渲染API返回的哈希表数据并提取字段生成表格的问题

核心思路 #

你获取到的二维数组第二项为标准JSON格式字符串，直接调用JSON.parse()即可解析为原生数组，直接解构出姓名、数值、可选图片三个字段，无需手动截取字符串。

代码实现 #

第一步：预处理原始数据 #

// 原始API返回数据
const rawData = [
    ["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 tableData = rawData.map(item => {
  const id = item[0]
  // 直接解析JSON字符串，解构出对应字段，无图片时avatar为undefined
  const [name, score, avatar] = JSON.parse(item[1])
  return { id, name, score, avatar }
})

第二步：React中渲染表格 #

function UserTable() {
  return (
    <table border={1} cellPadding={8} cellSpacing={0}>
      <thead>
        <tr>
          <th>唯一ID</th>
          <th>姓名</th>
          <th>数值</th>
          <th>图片</th>
        </tr>
      </thead>
      <tbody>
        {tableData.map(row => (
          <tr key={row.id}>
            <td>{row.id}</td>
            <td>{row.name}</td>
            <td>{row.score}</td>
            <td>{row.avatar ? <img src={row.avatar} alt={row.name} width={50} /> : '无'}</td>
          </tr>
        ))}
      </tbody>
    </table>
  )
}

原有代码出错原因 #

你调用data.slice(1, 2)得到的是长度为1的数组，而非第二个元素本身的字符串，你使用数组的长度（值为1）作为substring的结束索引，最终截取范围无效，才会返回异常结果。

内容的提问来源于stack exchange，提问作者JakeKempo