如何在ReactJS应用程序中使用forEach显示组件

Question

如何显示我的产品颜色？我需要首先解析它们，这就是为什么我尝试以某种方式使用forEach：

以下是我尝试过的：

const ParsedColors = props => {
return(
props.product.color.forEach(col => {
const parsed = JSON.parse(col)
return(
<button name="color" value={parsed.value} style={{backgroundColor: `${parsed.value}`}} onClick={() => colorPicker([props.product._id, parsed.value])}/>
)
})
)
}
...
<div>
<ParsedColors product={product}/>
<div/>

我知道forEach不会返回数组，但我在map中找不到方法。正如我所说，我需要解析每种颜色的

这返回一个错误：

错误：ParsedColors(…(：渲染未返回任何内容。这通常意味着缺少返回语句。或者，为了不渲染任何内容，返回null。

Answer 1

forEach不返回任何内容，因此您无法按当前方式为其分配变量。使用地图代替

const ParsedColors = props => {
return(
props.product.color.map(col => {
const parsed = JSON.parse(col)
return(
<button name="color" value={parsed.value} style={{backgroundColor: `${parsed.value}`}} onClick={() => colorPicker([props.product._id, parsed.value])}/>
)
})
)
}
...