Question

我有一个对象列表：

const products2 = [
    {category: "Category 1", products:
        {
            product1: "1",
            product2: "2"
        }
    },
    {category: "Category 2", products:
        {
            product1: "3",
            product2: "4"
        }
    },
]

如何在div中渲染它？试图绘制它，但它没有工作:(

谢谢，库巴

Answer 1

products是一个数组，所以map就可以了。另一方面，products不是，因此map不会工作。例如，您可以使用Object.values(products2[0].products)，这样您就可以在数组中获得1和2并使用它来执行您需要的操作。

＆＃13;

const products2 = [
  {
    category: "Category 1",
    products: {
      product1: "1",
      product2: "2"
    },
  },
  {
    category: "Category 2",
    products: {
      product1: "3",
      product2: "4"
    },
  },
]

const result = products2
  .map(product => `${product.category} ${Object.values(product.products).join(' ')}`)


console.log(result)

＆＃13;

同样适用于反应组件：

render() {
   return (
     <div>
        {products2
          .map(product =>
            <div>
              {product.category}
              {Object.values(product.products).map(name => <p>{name}</p>)}
            </div>
          )
        }
     </div>
   )
}

PS：你不需要像我一样映射两次。只映射一次并立即返回div也没关系。

在Reacts中渲染嵌套对象的列表

1 个答案: