多级映射(.map)

Question

我试图映射一个对象，但我很难获得正确的结果

我的示例对象数组

[
{
"round": 1,
"points": 0,
"colors": [
"#c99e15",
"#b9bbbd",
"#7C0B2B",
"#97CC04",
"#7fffd4"
]
},
{
"round": 2,
"points": 0,
"colors": [
"#c99e15",
"#b9bbbd",
"#7C0B2B",
"#476C9B",
"#ADD9F4"
]
}
]

我想找一张能买到的桌子

圆形X//点数

1. 颜色1
2. 颜色2
3. 颜色3
4. 等等

圆形X+1//点

1. 颜色1
2. 颜色2
3. 颜色3
4. 等等

etc

我当前的代码看起来是这样的，但不幸的是，这不断重复"中的结果；"颜色"；值

<ul>
{obj.map((round) => (
<li key={round.round}>{round.round}
<ul>
{obj.map((outerElement) =>
outerElement.colors.map((colors) => (
<li key={colors} style={{ backgroundColor: colors }}>
{colors}
</li>
))
)}
</ul>
</li>
))}
</ul>

Answer 1

我不知道为什么要在同一个对象上的循环中obj.map((outerElement) => ...)。您需要通过round.colors进行映射

<li key={round.round}>
{round.round}
<ul>
{round.colors.map((color) => (
<li key={color} style={{ backgroundColor: color }}>
{color}
</li>
))}
</ul>
</li>