React中多层Map遍历对象数组出现颜色重复问题及目标布局实现咨询

我来帮你搞定这个重复渲染的问题！你当前代码的问题很明确——内层又重新遍历了整个obj数组，所以每个ROUND项下面都会把所有轮次的颜色都渲染一遍，自然就出现重复了。

咱们只需要调整内层的遍历逻辑，直接用当前正在处理的round对象里的colors数组来遍历就行，不用再去碰整个obj。

修正后的代码如下：

<ul>
  {obj.map((round) => (
    <li key={round.round}>
      ROUND {round.round} // POINTS {round.points}
      <ul>
        {round.colors.map((color) => (
          <li 
            key={color} 
            style={{ backgroundColor: color, padding: "4px 8px" }}
          >
            {color}
          </li>
        ))}
      </ul>
    </li>
  ))}
</ul>

关键修改点说明： #

• 外层obj.map((round) => ...)负责遍历每一个轮次对象，逻辑是对的
• 内层把obj.map((outerElement) => ...)改成了round.colors.map((color) => ...)，这样每个轮次下面只会渲染自己对应的颜色列表
• 同时补上了ROUND {round.round} // POINTS {round.points}的文本，完美匹配你想要的结构
• 额外加了一点内边距padding，让颜色块看起来更规整，你可以根据需求调整样式

这样运行后，就能得到你预期的层级列表：每个ROUND项下面只显示当前轮次的分数和对应颜色，不会再出现重复渲染的问题啦！

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