ReactJS 在组件中显示 API答案

【问题标题】：ReactJS Display API in ComponentReactJS 在组件中显示 API
【发布时间】：2017-02-25 05:10:01
【问题描述】：

我是新来的反应。我正在使用

形式的 api

{
 "category": "dogs",
 "available": [
   {
     "name": "pedro",
     "breed": "chihuahua"
   },
   {
     "name": "roxane"
     "breed": "beagle"
    }
 ]
},
{
"category": "cat",
"available": [
  {
    "name": "garfield",
    "breed": "tobby"
   }
 ]
}

我想以名称-品种对显示同一类别的所有可用宠物。

示例：显示所有狗

佩德罗

吉娃娃

罗克珊

比格犬

但是那个数组让我很难过。

尝试

App.jsx

        {this.state.data.map((availablePets, i) => <Content key = {i} data = {Content} />)}

Content.jsx

{this.props.data.available[WhatDoIPutHere?].name}
{this.props.data.available[ajsnxnnx].breed}

还有其他方法可以以名称-品种对显示同一类别的所有可用宠物吗？

已解决

 {this.props.data.faqs.map((QA,i) => 
            <div key={i}>
            <h4>{this.props.data.category[i].name}</h4>
            <p>{this.props.data.category[i].breed}</p>
            </div>
        )}

【问题讨论】：

标签： json api reactjs

【解决方案1】：

您的解决方案不是动态的。

这将是一个更好的解决方案。

{
  this.props.data.faqs.map((QA,i) => {
    const pets = QA.available.map((pets, j) => {
       return <div key={j}  
          <h4>{pets.breed}</h4>
          <p>{pets.name}</p>
        </div>
    })
     return <div key={i}>
       <h4>{QA.category}</h4>
       {pets}
    </div>
  })
}

【讨论】：