数组映射的GPU芯片信息无法在React表格中显示求助

核心问题分析 #

• map函数未返回JSX元素：chips.map()回调使用大括号{}但未显式返回<tr>节点，循环后无DOM元素生成
• 表头与单元格数量不匹配：表头定义10个<th>，但数据行渲染11个<td>（多了chip.id列），导致表格结构错乱
• key属性使用不规范：用index作为key易引发列表重排时的性能问题，应使用唯一标识
• 数据转义字符未处理：hardDisk和bandwith字段中的"是HTML转义字符，直接渲染显示异常

修复后的代码 #

import styled from 'styled-components';

const chips = [
  {
    id: 1,
    gpuType: 'V200-32G',
    region: 'North China',
    availableGPUcount:'8',
    GPUram:'32GB',
    CPUmodel:'Intel(R) Xeon(R) CPU E5-2698 v4',
    perGPU:'10core CPU 64G RAM',
    hardDisk:'System disk":" 20GData disk":" 100GB',
    bandwith:'U":"12MB/s D":"12MB/s',
    NAS:'Without',
    Price:1.2
  },
  {
    id: 2,
    gpuType: 'V200-32G',
    region: 'North China',
    availableGPUcount:'3',
    GPUram:'32GB',
    CPUmodel:'Intel(R) Xeon(R) CPU E5-2698 v4',
    perGPU:'10core CPU 64G RAM',
    hardDisk:'System disk":" 20GData disk":" 100GB',
    bandwith:'U":"12MB/s D":"12MB/s',
    NAS:'Without',
    Price:1.2
  },
  {
    id: 3,
    gpuType: 'V200-32G',
    region: 'North China',
    availableGPUcount:'5',
    GPUram:'32GB',
    CPUmodel:'Intel(R) Xeon(R) CPU E5-2698 v4',
    perGPU:'10core CPU 64G RAM',
    hardDisk:'System disk":" 20GData disk":" 100GB',
    bandwith:'U":"12MB/s D":"12MB/s',
    NAS:'Without',
    Price:1.2
  },
  {
    id: 4,
    gpuType: 'A200-32G',
    region: 'Central China',
    availableGPUcount:'8',
    GPUram:'32GB',
    CPUmodel:'Intel(R) Xeon(R) CPU E5-2698 v4',
    perGPU:'10core CPU 64G RAM',
    hardDisk:'System disk":" 20GData disk":" 100GB',
    bandwith:'U":"12MB/s D":"12MB/s',
    NAS:'Without',
    Price:1.2
  },
  {
    id: 5,
    gpuType: 'V100-16G',
    region: 'Central China',
    availableGPUcount:'8',
    GPUram:'32GB',
    CPUmodel:'Intel(R) Xeon(R) CPU E5-2698 v4',
    perGPU:'10core CPU 64G RAM',
    hardDisk:'System disk":" 20GData disk":" 100GB',
    bandwith:'U":"12MB/s D":"12MB/s',
    NAS:'Without',
    Price:1.2
  },
];

export default function GPUTable() {
  // 处理HTML转义字符
  const decodeHtml = (str) => {
    const txt = document.createElement("textarea");
    txt.innerHTML = str;
    return txt.value;
  };

  return (
    <Main>
      <table className='table'>
        <thead>
          <tr>
            <th>ID</th>
            <th>GPU Type</th>
            <th>Region</th>
            <th>Available GPU Count</th>
            <th>GPU Ram</th>
            <th>CPU Model</th>
            <th>Per GPU</th>
            <th>Hard Disk</th>
            <th>Bandwidth</th>
            <th>NAS</th>
            <th>Price</th>
          </tr>
        </thead>

        <tbody>
          {chips.map((chip) => (
            <tr key={chip.id}>
              <td>{chip.id}</td>
              <td>{chip.gpuType}</td>
              <td>{chip.region}</td>
              <td>{chip.availableGPUcount}</td>
              <td>{chip.GPUram}</td>
              <td>{chip.CPUmodel}</td>
              <td>{chip.perGPU}</td>
              <td>{decodeHtml(chip.hardDisk)}</td>
              <td>{decodeHtml(chip.bandwith)}</td>
              <td>{chip.NAS}</td>
              <td>{chip.Price}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </Main>
  );
}

const Main = styled.div`
  td{
    color:black;
    padding: 8px;
    border: 1px solid #ddd;
  }
  th {
    background-color: #f2f2f2;
    padding: 8px;
    border: 1px solid #ddd;
  }
  table {
    border-collapse: collapse;
    width: 100%;
  }
`;

关键修改说明 #

• 修复map返回逻辑：将map回调的大括号改为小括号实现隐式返回，或在大括号内添加return语句
• 对齐表头与单元格：新增ID表头，保证列数一致
• 替换key属性：用chip.id作为唯一key，提升列表渲染稳定性
• 处理转义字符：添加decodeHtml函数，将"转换为正常双引号
• 优化表格样式：添加边框、内边距等样式，提升可读性

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