reactjs ,jsx 迭代嵌套对象

Question

我有一个包含所有子对象的 reactjs 应用程序，我想迭代它们一些我尝试过的东西

cart.line_items.map(items =><CartPreview key={items.id} data = {items} />)} 

购物车预览如下所示

import React from 'react'

export default (props) => {
 const { data } = props
return (
  <a href={Routes.spree_cart_path()}>
    <span className="glyphicon glyphicon-shopping-cart" />
  &nbsp;
    {I18n.t('spree.cart')}: {I18n.toCurrency(data.total)}
  </a>
 )
}

它的 line_items 对象的打印总数很好..

现在我想在订单项对象中走得更远（我想在订单项中获取变体和图像对象），我确实喜欢

{ !cart.isFetching &&   cart.line_items.map
    ( 
        function(variant, key)
        { 
       return(
              Object.keys(variant).map
              (
                function(images)
                {
                 return
                      (  
                        <CartPreview  variant={variant} image={images} />
                      );
              }
            )
          )
      }
    )  
  } 

提供未定义的变体和 line_items

谁能帮帮我...

为了理解，我也附上了屏幕截图......

Answer 1

希望我能正确理解您的问题。你的代码对我来说没有多大意义。不确定下面的方法是否是您想要的。 我假设对于每张图片，您都想渲染一个 CartPreview。

{ 
 !cart.isFetching && cart.line_items.map( 
      line_item => 
 line_item.variant.images.map(image => <CartPreview variant={line_item.variant} image={image} />))  
} 

我觉得你对 Object.keys 和 map 有点困惑。你可以去查看文档，它会让你清楚地了解在 javascript 中迭代数组。