reactjs，jsx迭代嵌套对象

Question

我有一个包含所有子对象的reactjs应用程序，我想迭代我尝试过的几件事

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

和购物车预览就像下面的

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

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

现在我想在行项目对象中更进一步（我希望在订单项中获取变体和图像对象），我确实喜欢

{{1}}

给出了未定义的变体和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中迭代数组。