React/JS中如何在表格渲染数组列表？代码仅显表头求排查

数据老陈

2026-5-22

解决React表格仅显示表头的问题

嘿，刚看了你的问题，日志里能正常打印数组内容，说明数据是没问题的！表格只显示表头，大概率是你渲染表格行的时候没正确返回JSX元素，或者map的结果没被正确插入到表格体里。我给你捋捋常见问题和解决办法：

先看正确的渲染写法

你可以参考这个示例代码，把你的表格改成这样：

// 你的数组定义
const testList = [ 
  { title: 'Title One', id: 1 }, 
  { title: 'Title Two', id: 2 }, 
  { title: 'Title Three', id: 3 }
];

function BodyComponent() {
  return (
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>标题</th>
        </tr>
      </thead>
      <tbody>
        {/* 关键在这里：map遍历数组并返回<tr>元素 */}
        {testList.map(item => {
          console.log(`${item.id}. ${item.title}`);
          // 必须return JSX，或者用下面的隐式返回写法
          return (
            <tr key={item.id}> {/* 一定要加唯一key，用item.id刚好合适 */}
              <td>{item.id}</td>
              <td>{item.title}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

你可能踩的坑

忘记写return：如果map里用了大括号{}，必须显式写return返回<tr>；要是嫌麻烦，也可以用箭头函数的隐式返回（去掉大括号，直接包括号）：
```
{testList.map(item => (
  <tr key={item.id}>
    <td>{item.id}</td>
    <td>{item.title}</td>
  </tr>
))}
```
缺少key属性：虽然不会导致不渲染，但React会抛出警告，而且这是列表渲染的最佳实践，用每个item唯一的id当key就很稳妥。
JSX结构错误：要确保所有表格行都放在<tbody>标签里，每个<tr>里的<td>数量要和表头的<th>对应上，不然可能会被React忽略。