使用 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

我认为像这样的 sn-p 应该可以工作。

我在高级 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

“有没有办法使用map方法嵌套在prods函数中，输出关键词和排名信息？”

回答：是的。

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

要访问它，您可以像在现有的.map() 调用中使用其他属性一样使用点表示法。

要访问数组keywords 上的对象的属性，您可以在其上调用.map() 并使用for 符号再次访问您想要的属性：

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