React中如何从对象数组生成HTML表格？解决forEach不渲染问题

问题场景 #

在React组件中尝试通过API获取的对象数组demoLedgerEntries生成表格行，但仅显示表头、固定的首行和末行，forEach循环部分未渲染出任何<tr>元素。

原代码片段：

return(
  </Container>
    {((demoLedgerEntries.length > 0) &&
      <Table>
        <thead>
          <tr><td>Title demo</td><td>Title demo</td><td>Title demo</td></tr>
        </thead>
        <tbody>
          <tr><td>itemdemo1</td><td>itemdemo1</td><td>itemdemo1</td></tr>
          {demoLedgerEntries.forEach((item) => {
            return(<tr><td>{item.name}</td> </tr>)
            })
          }
          <tr><td>itemdemo2</td><td>itemdemo2</td><td>itemdemo2</td></tr>
        </tbody>
      </Table>
      )
    }
  </Container>
)

对应的数组数据：

setDemoLedgerEntries([
  { name: 'Player 1', score: 10 },
  { name: 'Player 2', score: 7 },
  { name: 'Player 3', score: 3 }]
);

问题原因 #

Array.forEach()方法仅用于遍历数组执行回调逻辑，不会返回任何值（返回undefined），因此在JSX表达式中这部分等同于插入undefined，无法渲染出元素。React需要从JSX表达式中获取可渲染的元素数组，此时应使用Array.map()方法——它会遍历数组并返回新的元素数组，符合React的渲染要求。

同时还有两处细节问题：

• 代码开头的</Container>是错误的闭合标签，需改为<Container>
• React要求列表元素必须添加唯一key属性，避免渲染警告和性能问题

修改后的代码 #

return(
  <Container>
    {demoLedgerEntries.length > 0 &&
      <Table>
        <thead>
          <tr>
            <td>玩家名称</td>
            <td>分数</td>
            <td>预留列</td>
          </tr>
        </thead>
        <tbody>
          <tr><td>itemdemo1</td><td>itemdemo1</td><td>itemdemo1</td></tr>
          {demoLedgerEntries.map((item, index) => (
            <tr key={index}>
              <td>{item.name}</td>
              <td>{item.score}</td>
              <td></td>
            </tr>
          ))}
          <tr><td>itemdemo2</td><td>itemdemo2</td><td>itemdemo2</td></tr>
        </tbody>
      </Table>
    }
  </Container>
)

关键修改点说明 #

• 用map替换forEach：利用map返回元素数组的特性，让React能渲染出对应的表格行
• 添加key属性：给每个map生成的<tr>设置key={index}（若数组内有唯一ID字段，比如id，优先使用该字段作为key，比index更稳定）
• 修正标签错误：将开头的</Container>改为<Container>
• 补全表格列：渲染score字段，让内容与表头列对应（可根据实际需求调整）

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