React：解决嵌套Map导致表格状态列溢出及考试状态判断问题

问题根源 #

你当前的代码里，每个考试行（<Tr>）嵌套了userDatas.map()，这会为每一条用户记录生成一个<Td>，但表头只有一个「Status」列，导致表格列数暴增，直接造成溢出。

修复方案 #

核心思路：对每个考试只生成一个Status列的单元格，用some()方法判断该考试是否存在用户完成记录，而非循环所有用户数据生成多个单元格。

修改后的代码：

<Header>Status report</Header>
<Table style={{ tableLayout: 'fixed', width: '100%' }}>
  <Tr>
    <Th>Exam Name</Th>
    <Th>Link</Th>
    <Th>Status</Th>
  </Tr>
  {examDatas.map((exam) => (
    <Tr key={exam._id}> {/* 用exam._id做key比index更可靠 */}
      <Td>{exam.examname}</Td>
      <Td>
        <Link to={`/quiz/${exam._id}`}>
          <Button>Go to exam</Button>
        </Link>
      </Td>
      {/* 用some()判断是否存在匹配的用户考试记录 */}
      <Td>
        {userDatas.some(user => exam._id === user.examId) 
          ? <span>Solved（已完成）</span> 
          : <span>Available（可用）</span>}
      </Td>
    </Tr>
  ))}
</Table>

额外优化 #

• 给表格加上tableLayout: 'fixed'和width: '100%'，让表格布局更稳定，避免内容拉伸导致溢出。
• 把循环的key从index换成exam._id，保证列表项更新时的渲染稳定性。

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