React Table渲染异常：使用Map方法无法正确生成表格求助

你的代码核心问题是在map循环内重复创建了多个<table>标签，每一条车辆数据都被包裹在独立的表格中，因此无法形成一个完整的表格结构，只能显示零散的行内容。

修正后的代码 #

export type CarsType = {
    manufacturer: string
    model: string
}

export type NewComponentType = {
    cars: CarsType[]
}

export const NewComponents = (props: NewComponentType) => {
    return (
        <table>
            {/* 添加表头 */}
            <thead>
                <tr>
                    <th>厂商</th>
                    <th>车型</th>
                </tr>
            </thead>
            <tbody>
                {/* 仅循环渲染表格行 */}
                {props.cars.map((car, index) => (
                    <tr key={index}>
                        <td>{car.manufacturer}</td>
                        <td>{car.model}</td>
                    </tr>
                ))}
            </tbody>
        </table>
    );
};

关键修改点 #

• 将<table>标签移至map循环外部，确保所有数据行都属于同一个表格
• 添加<thead>表头和<tbody>标签，完善表格的标准结构
• 仅在map中渲染<tr>行元素，每个行使用唯一的key（如果数据中有唯一ID字段，建议替换index作为key，性能更优）

使用上述代码后，车辆数据会以标准表格形式展示，包含表头和统一的表格边框结构。

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