React中如何通过JSON字段名数组实现可复用表格组件

问题原因 #

你用eq.inter获取属性值的方式是错误的——点语法.后面只能跟固定的属性名，而inter是循环中的变量，必须用方括号语法eq[inter]才能动态访问对象属性。另外key={eq.inter}也会因为同样的原因取不到有效值，需要替换成合理的唯一标识。

修正后的组件代码 #

export default function DenseTable({ data, interest }) {
  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} size="medium" aria-label="a dense table">
        <TableHead>
          <TableRow>
            {interest.map((inter) => (
              <TableCell key={inter} align="right">{inter}</TableCell>
            ))}
            <TableCell align="right">Edit</TableCell>
            <TableCell align="right">Delete</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {data.map((eq, rowIndex) => (
            <TableRow key={`row-${rowIndex}`} sx={{ "&:last-child td, &:last-child th": { border: 0 } }}>
              {interest.map((inter, colIndex) => {
                return (
                  <TableCell key={`cell-${rowIndex}-${colIndex}`} align="right">
                    {eq[inter]}
                  </TableCell>
                );
              })}
              <TableCell align="right">
                <EditIcon />
              </TableCell>
              <TableCell align="right">
                <DeleteIcon />
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

关键修改点 #

• 替换取值语法：把eq.inter改成eq[inter]，通过方括号语法动态读取对象属性，适配不同字段名的API数据
• 优化key值：表头用inter作为唯一key（假设字段名不重复），表格单元格用行索引+列索引组合生成唯一key，避免key无效或重复
• 变量名语义化：将data遍历的index改为rowIndex，和列遍历的colIndex区分开，代码可读性更强

修改后，组件就能根据传入的interest数组动态渲染对应字段内容，完美适配不同结构的API返回数据。

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