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

如何显示我的产品。颜色？我需要先解析它们，这就是为什么我尝试使用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/>

const ParsedColors=props=>{
返回(
props.product.color.forEach（col=>{
const parsed=JSON.parse（col）
返回(
颜色选择器（[props.product.\u id，parsed.value]）}/>
)
})
)
}
...

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

这将返回一个错误：

错误：ParsedColor（…）：渲染未返回任何内容。这 通常表示缺少返回语句。或者，什么也不做， 返回null

---

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])}/>
                )
            })
            )
        }
...

const ParsedColors=props=>{
返回(
props.product.color.map（col=>{
const parsed=JSON.parse（col）
返回(
颜色选择器（[props.product.\u id，parsed.value]）}/>
)
})
)
}
...

forEach不返回任何内容。如果要将迭代更改分配给变量，则需要使用map谢谢！有效：D