React.js实现动态表格时.map遍历导致表头重复渲染问题求解

问题背景 #

我正尝试使用react创建动态表格，目前已完成的代码如下：

DataTable.js 现有代码 #

import React from 'react'
import data from '../data/customerData.json'
import '../styles/dataTable.css'



const DataTable = () => {
    return (
        <div>
          {data.map(dat => {
            return (
                <div>
                    <table className='data-table-container'>
                        <tr>
                            <th>Customer Name</th>
                            <th>Phone Number</th>
                            <th>Loan Vehicle</th>
                            <th>Time Out</th>
                            <th>Time Due</th>
                        </tr>
                        <tr>
                            <td>{dat.CustomerName}</td>
                            <td>{dat.PhoneNumber}</td>
                            <td>{dat.LoanVehicle}</td>
                            <td>{dat.TimeOut}</td>
                            <td>{dat.TimeDue}</td>
                        </tr>
                    </table>
                </div>
            );
          })}
        </div>
      );
    }

export default DataTable

Home.js 现有代码 #

import React, { useState } from 'react';
import Calendar from 'react-calendar';
import DataTable from '../components/DataTable';
import '../styles/calendar.css'




const Home = () => {
  const [value, onChange] = useState(new Date());
  let today = new Date().toDateString()
  return (
    <>
      <div className='date-display'>
        <h3 className='current-date-display'>{today}</h3>
      </div>
      <Calendar onChange={onChange} value={value} />
      <DataTable/>
    </>
  )
}

export default Home

实际渲染效果 #

问题描述 #

目前在DataTable.js组件中使用.map方法遍历customerData.json中的数据，遍历逻辑本身可正常运行，但存在如下问题：<th>标签定义的表头会随每次循环重复渲染。
预期实现效果为：<th>表头仅渲染一次，仅通过循环渲染<td>标签对应的表格数据行，预期效果如下：

问题原因 #

当前代码把整个<table>标签（包含表头行）都放在了.map()的遍历回调内部，每遍历一条数据就会生成一个全新的独立表格，表头自然会跟着每条数据重复渲染。

修复方案 #

调整组件DOM结构，全局只保留一个<table>标签，将表头行移到遍历逻辑外部固定渲染，仅在表体区域遍历数据生成对应的数据行即可。
修正后的DataTable.js代码如下：

import React from 'react'
import data from '../data/customerData.json'
import '../styles/dataTable.css'

const DataTable = () => {
    return (
        <div>
            <table className='data-table-container'>
                {/* 表头放在遍历逻辑外部，仅渲染一次 */}
                <thead>
                    <tr>
                        <th>Customer Name</th>
                        <th>Phone Number</th>
                        <th>Loan Vehicle</th>
                        <th>Time Out</th>
                        <th>Time Due</th>
                    </tr>
                </thead>
                <tbody>
                    {/* 仅遍历渲染数据行 */}
                    {data.map((dat, index) => {
                        return (
                            <tr key={index}>
                                <td>{dat.CustomerName}</td>
                                <td>{dat.PhoneNumber}</td>
                                <td>{dat.LoanVehicle}</td>
                                <td>{dat.TimeOut}</td>
                                <td>{dat.TimeDue}</td>
                            </tr>
                        );
                    })}
                </tbody>
            </table>
        </div>
      );
    }

export default DataTable

优化注意点 #

• 遍历生成列表元素时，建议给每个<tr>添加唯一key属性，如果数据中有唯一标识（比如客户ID），优先用唯一标识替换示例中的index作为key值，避免出现渲染异常。
• 用<thead>、<tbody>标签区分表头和表体区域，符合HTML语义化规范，也方便后续编写样式单独控制表头、表体的显示效果。

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