React表格按每3个TD分组渲染新行的技术问题

问题根源 #

你的代码存在两个核心问题：

1. 数据处理逻辑错误：通过Object.keys(goalies).forEach循环时，每次都会覆盖goal_object，最终只保留了最后一个球员的数据；后续的for...in遍历的是单个球员的属性（如p_name、city），导致生成的<td>是球员属性而非每个球员对应一个<td>。
2. 未实现分组逻辑：所有生成的<td>都被硬塞到同一个<tr>中，没有按每3个一组拆分。

修正后的代码 #

1. 表格渲染组件（Roster）

修正表格结构，确保<Goalies/>放在<table>的<tbody>内部，符合HTML表格规范：

export class Roster extends React.Component{
    render(){
        return(
            <div id="tab">
                <table>
                    <tbody>
                        <tr>
                            <td colSpan={3}>
                                <h4>Goalkeepers</h4>
                            </td>
                        </tr>
                        {/* 将Goalies组件放在tbody内部，确保表格结构合法 */}
                        <Goalies/>
                    </tbody>
                </table>
            </div>
        )
    }
}

2. 球员列表组件（Goalies）

重写数据处理和分组逻辑，实现每3个球员对应一个<tr>：

// 导入你的数据对象，注意替换成实际文件路径
import { def as goaliesData } from './data.js';

class Goalies extends React.Component{
    renderTableRows() {
        // 把对象格式的球员数据转换成数组，每个元素是一个球员对象
        const allPlayers = Object.values(goaliesData);
        
        // 按每3个球员一组拆分数组
        const playerGroups = [];
        for (let i = 0; i < allPlayers.length; i += 3) {
            // 每次截取3个球员（不足3个时取剩余的）
            playerGroups.push(allPlayers.slice(i, i + 3));
        }
        
        // 遍历分组，生成对应的<tr>和<td>
        return playerGroups.map((group, rowIndex) => (
            <tr key={`row-${rowIndex}`}>
                {group.map((player, playerIndex) => (
                    <td key={`player-${playerIndex}`}>
                        {player.p_name}<br/>
                        {player.city}<br/>
                        {player.number}
                    </td>
                ))}
            </tr>
        ));
    }

    render() {
        // 直接返回生成的<tr>数组，嵌入父组件的tbody中
        return this.renderTableRows();
    }
}

3. 数据对象（保持不变）

export const def = {
    1:{
        p_name:"p1",
        number: 2,
        city: "city1"
    },
    2:{
        p_name:"p2",
        number: 5,
        city: "city2"
    },
    3:{
        p_name:"p3",
        number: 3,
        city: "city3"
    },
    4:{
        p_name:"p4",
        number: 7,
        city: "city4"
    },
    5:{
        p_name:"p5",
        number: 15,
        city: "city5"
    },
    6:{
        p_name:"p6",
        number: 21,
        city: "city6"
    }
}

效果说明 #

修正后，代码会：

• 先把所有球员对象转换成数组
• 将数组按每3个元素拆分成分组
• 每个分组对应一个<tr>，分组内的每个球员对应一个<td>
• 最终渲染出你期望的每3个<td>换一行的表格结构

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