material-table/core中detailPanel无法显示行内附件列表求助

可能的原因及修复方案 #

1. 列表渲染缺少唯一key属性 #

React要求列表渲染的每个元素必须带有唯一key属性，否则可能导致组件不渲染或渲染异常。你的map循环未添加该属性，补上即可：

detailPanel={(rowData) => {
  return rowData?.document_attachment?.length > 0 ? rowData.document_attachment.map((attachment) => {
    // 给Box添加唯一key，优先用attachment的id，无id则用name（需确保name唯一）
    return <Box
      key={attachment.id || attachment.name}
      sx={{ m: 1 }}
      onClick={() => handleClickPreviewDoc(attachment)}
    >
      <Typography sx={{ fontSize: "13px", display: "Flex", alignItems: "center", gap: "10px" }}>
        <FilePresentIcon sx={{ fontSize: "13px", opacity: "0.6" }} />
        {attachment.name}
      </Typography>
    </Box>
  }) : <Box sx={{ m: 1 }}>
    <Typography sx={{ fontSize: "13px", display: "Flex", alignItems: "center", gap: "10px" }}>
      No Attachment Found
    </Typography>
  </Box>
}}

2. 空数组判断逻辑错误 #

rowData?.document_attachment如果是空数组[]，在JS中会被判定为false，导致错误显示"No Attachment Found"。需修改为判断数组长度是否大于0：

// 原判断：rowData?.document_attachment
// 修改为：rowData?.document_attachment?.length > 0

3. 确认rowData数据结构正确 #

在组件中添加日志打印，验证rowData.document_attachment的实际结构：

detailPanel={(rowData) => {
  console.log('当前行附件数据:', rowData?.document_attachment); // 检查数据格式是否符合预期
  // ... 其余代码
}}

确保它是包含name属性的对象数组，而非null、undefined或其他非数组类型。

4. 检查material-table的detailPanel配置 #

确认你的material-table组件正确启用了detailPanel，无其他配置冲突：

<MaterialTable
  // ... 其他表格配置
  detailPanel={/* 你的detailPanel代码 */}
  // 可选：自定义展开图标
  detailPanelIcon={ExpandMoreIcon}
/>

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