使用React访问多维数组js

Question

我正在使用json api，并且能够访问api并使用map方法列出第一个数组，但无法访问除此之外的任何内容。

{ 
"client_id": 1, 
"client_name": "Moen, Hickle and Stehr", 
"products": [ { 
    "product_id": 1, 
    "product_name": "Ergonomic Cotton Keyboard", 
    "product_asin": "cfq35yoyh64i", 
    "product_image_url": "https://unsplash.it/310/676", 
    "keywords": [ { 
     "keyword_id": 1, 
     "keyword_name": "nam", 
     "keyword_country": "LV", 
     "ranks": [ { 
      "rank_id": 1, 
      "rank_position": 214, 
      "rank_page": 2, 
      "rank_date": "2016-08-16" 
     }, { 
      "rank_id": 2, 
      "rank_position": 82, 
      "rank_page": 3, 
      "rank_date": "2016-11-12" 
     } ] 
    } ] 
}] 
} 

如何访问关键字和排列数组？有没有办法使用map方法嵌套prods函数并输出关键字和排名信息？

var Product = React.createClass({ 

render: function() { 

var prods = this.props.products.map(function(item, index){ 
    return(
     <ul key={index}> 
     <li>{item.product_name} </li> 
     <li>{item.product_image_url}</li> 
     </ul>  
    ) 
}); 

return (
    <div className="col-sm-12 compBlock"> 
    <div className="col-sm-6"> 
     <h3>{this.props.name}</h3> 
     {prods} 
    </div> 
    </div> 
) 
} 

Answer 1

我觉得是这样的片段应该工作。

我使用的是高层次的map调用内map方法和分配结果的变量，包括我在高层次的返回对象

const props = { 
 
"client_id": 1, 
 
"client_name": "Moen, Hickle and Stehr", 
 
"products": [ { 
 
    "product_id": 1, 
 
    "product_name": "Ergonomic Cotton Keyboard", 
 
    "product_asin": "cfq35yoyh64i", 
 
    "product_image_url": "https://unsplash.it/310/676", 
 
    "keywords": [ { 
 
     "keyword_id": 1, 
 
     "keyword_name": "nam", 
 
     "keyword_country": "LV", 
 
     "ranks": [ { 
 
      "rank_id": 1, 
 
      "rank_position": 214, 
 
      "rank_page": 2, 
 
      "rank_date": "2016-08-16" 
 
     }, { 
 
      "rank_id": 2, 
 
      "rank_position": 82, 
 
      "rank_page": 3, 
 
      "rank_date": "2016-11-12" 
 
     } ] 
 
    } ] 
 
}] 
 
}; 
 

 
const prods = props.products.map((item, index) => { 
 
    const keywords = item.keywords.map(cur => { 
 
    return (
 
     <span> 
 
     <li>{cur.keyword_name}</li> 
 
     <li>{cur.keyword_country}</li>  
 
     </span> 
 
    ); 
 
    }); 
 
    return(
 
     <ul key={index}> 
 
     <li>{item.product_name}</li> 
 
     <li>{item.product_image_url}</li> 
 
     {keywords} 
 
     </ul>          
 
    ); 
 
}); 
 

 
console.log(prods);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 2

“是否有使用地图的方法来窝在电棒功能和输出的关键字和排名信息的方法吗？”

回答：是的。

你知道有一个属性keywords是一个很像this.props.products的对象数组。

要访问，您可以使用点符号，因为您已与现有的.map()调用中的其他属性一起使用。

要访问，数组keywords上一个对象的属性，你可以调用它.map()，并再次访问你想要的属性标记：

var prods = this.props.products.map(function(item, index){ 
    // You already are referencing these: 
    item.product_name 
    item.product_image_url 


    // To access keywords: 
    item.keywords (the keywords array) 

    // Nested map on keywords can be called here also: 
    item.keywords.map(function(current,index){ 
    // You can now access .ranks: 
    current.ranks 
    }); 
});