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和地图有点困惑。你可以去查资料，在javascript.

中迭代一个数组会让你有一个清晰的思路

reactjs，jsx 遍历嵌套对象

reactjs ,jsx iterate over nested object

javascript

array-map

jsx

reactjs