React中for循环仅返回首个div问题排查及分组实现

原因分析 #

你代码里的for循环只执行了一次就终止了——第一次迭代i=1时，return语句直接把第一个div返回给组件，函数立刻结束执行，后续i=2、i=3的循环根本没机会运行，所以只能看到第一个div。

修复方案 #

React组件需要返回完整的JSX结构，不能在循环中途return。要生成3个对应不同轮次的div，你可以直接遍历包含轮次的数组，把每个轮次的比赛渲染到独立div中：

const Bracket = ({bracket}: Props) => {
  return (
    <>
      {[1, 2, 3].map(round => (
        <div key={round}>
          {/* 筛选当前轮次的比赛，避免重复渲染之前轮次内容 */}
          {bracket.filter(match => match.roundNumber === round).map(match => (
            <Match 
              key={match.id}
              id={match.id}
              players={match.players}
              matchNumber={match.matchNumber} 
              roundNumber={match.roundNumber}              
            />
          ))}
        </div>
      ))}
    </>
  )
}

实现说明 #

1. 用[1,2,3].map遍历每个轮次，每个轮次生成一个独立的div容器
2. 外层div添加key={round}，这是React列表渲染的强制要求，用来标识每个元素的唯一性，优化渲染性能
3. 筛选条件改为match.roundNumber === round，确保每个div只显示对应轮次的比赛，不会像原代码那样重复渲染之前轮次的内容
4. 用<></>（React Fragment）包裹所有div，避免生成额外的无意义DOM节点

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