javascript - 在 Javascript 中遍历嵌套数组时出错

Question

我正在遍历对象数组并将结果显示在表格中。

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>
        ))
    }

现在，product.variants 也是一个对象数组。所以我需要遍历数组并分配给一个变量。这是这个数组的样子，

variants: Array(2)
0: {color: "red,blue"}
1: {size: "m,39"}

我想遍历这个数组并像这样显示结果，颜色 - 红色、蓝色，尺寸 - 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。在显示它们的值之前如何检查尺寸、颜色是否存在？谢谢

Answer 1

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

let variants = [{color: "red,blue"}, {size: "m,39"}];
let result = variants.map(obj => 
  Object.entries(obj).reduce((s,[key,val]) => s+=`${key[0].toUpperCase()+key.slice(1)} - ${val}`,'')); // creates a string of the required type
result = result.join(', ');
console.log(result);

renderVariants(variants){
    return variants && variants.map(obj => 
      Object.entries(obj).reduce((s,[key,val]) => s+=`${key[0].toUpperCase()+key.slice(1)} - ${val}`,'')).join(', ');
}