在Javascript中迭代嵌套数组时出错

我在一个对象数组中循环，并将结果显示在一个表中

renderProducts(){
        return this.state.products.map((product, index) => (
            <tr key={product.id}>
                <td>{product.code}</td>
                <td>{product.name}</td>
                <td>{product.price}</td>
                <td>{this.renderVariants(product.variants)}</td>
            </tr>
        ))
    }

我想在这个数组中循环，然后像这样显示结果，

颜色-红色、蓝色、尺码-m、39

。 这就是我想做的-

renderVariants(variants){
        if (variants != null && variants.length > 0) {
            variants.map((variant, index)  => {
                for(var key in variants) {
                    var color = variants[key].color;
                    var size = variants[key].size;
                    var message = color+size;
                }
            });
        }else{
            var message = 'null';
        }
        return message;
    }

这只返回“null”，颜色和大小返回空。 我如何以我前面所说的方式显示结果。此外，例如，阵列也可能是这样的：

variants: Array(1)
0: {size: "t,u"}

因此结果将是

Size-t，u

。在显示其值之前，如何检查尺寸、颜色是否存在？

---

感谢

一种更简单的方法可能是减少对象并将数组映射为如下所示的字符串

let variants=[{color:“red，blue”}，{size:“m，39”}]；
让结果=variants.map（obj=>
Object.entries（obj）.reduce（（s[key，val]）=>s+=`${key[0].toUpperCase（）+key.slice（1）}-${val}`，''）；//创建所需类型的字符串
result=result.join（'，'）；
控制台日志（结果）在if条件外声明消息变量

renderVariants(variants){
      var message = '';
        if (variants != null && variants.length > 0) {
            variants.map((variant, index)  => {
                for(var key in variants) {
                    var color = variants[key].color;
                    var size = variants[key].size;
                    message = color+size;
                }
            });
        }else{
            var message = 'null';
        }
        return message;
    }

您可以在数组上映射

，然后合并每个对象条目，然后加入数组

const变量=[{
颜色：“红，蓝”
},
{
尺寸：“米，39”
}
]
设v=variants.map（variant=>Object.entries（variant.flat（）.join（'-'））.join（'，'））
console.log（v）

join

比

reduce

+切掉逗号更合适。没有console.log（result），结果为空。表上没有显示任何内容您必须返回结果！我要退了。renderVariants（variants）{result=''；if（variants！=null&&variants.length>0）{let result=variants.map（obj=>Object.entries（obj）.reduce（（s[key，val]）=>s+=

${key[0].toUpperCase（）+key.slice（1）}-${val}

，''）；//创建所需类型的字符串result=result.join（'，）；}否则{var result='null'；}返回结果；}有效。将“let”更改为“var”

renderVariants(variants){
      var message = '';
        if (variants != null && variants.length > 0) {
            variants.map((variant, index)  => {
                for(var key in variants) {
                    var color = variants[key].color;
                    var size = variants[key].size;
                    message = color+size;
                }
            });
        }else{
            var message = 'null';
        }
        return message;
    }