Question

如何在数组中访问数据，并按类别分隔列表使用axios React Native

我正在尝试使用axio in react native

部署包含类别和产品的列表

我的json结构

  [
      {
        "id": "1",
        "name": "TV",
        "list": [
          {
            "idp": "1",
            "namep": "TV 43"
          },
          {
            "idp": "2",
            "namep": "TV 32"
          }
        ]
      },
      {
        "id": "2",
        "name": "Couch",
        "list": [
          {
            "idp": "3",
            "namep": "Couch for 3 people"
          },
          {
            "idp": "4",
            "namep": "Couch for 2 people"
          }
        ]
      }
    ]

我已经做了什么，所以我可以显示类别

    constructor(props) {
       super(props);
       this.state = { category: [], list: [] };
       }

    componentWillMount() {
                axios.get('http://localhost/api/list.json')
               .then(response => {
                 this.setState({ 

             category: response.data, 
             list: response.data.list });

             })
               .catch(() => { console.log('Err'); });
           } 
.............

{this.state.category.map((item, i) => {
<Text>{item.name}</Text>
  { item.list.map((product, i) => {
       <Text>{product.namep}</Text>
  })}
 })}

Example list

Answer 1

很抱歉，我不能给你一个更详细和更有针对性的答案，因为我不熟悉本地反应，但逻辑是这样的：

循环遍历主数组并提取类别名称然后在其中循环另一个循环用于迭代产品。

<div id="list">
  
</div>

{
  this.state.category.forEach((item, i) => {
    <Text>{item.name}</Text>
    item.list.forEach((product, i) => {
      <Text>{product.namep}</Text>
    })
  })
}

所以，不知道反应原生并假设你粘贴的代码是正确的，我会冒险说它会像这样：

HeightRequest

使用React Native中的axios.get访问数组List中的数据

1 个答案: