如何在React Native中使用数组对象迭代数组

时间:2018-06-23 01:10:30

标签: javascript arrays reactjs loops react-native

我开始在React Native中编程,并且我有一个像这样的数组:

state = {
    territories: [
        {
            id: 1,
            number: 1,
            title: 'Territory 1',
            streets: [
                {
                    id: 1,
                    name: 'Name of street 1',
                    houses: [
                        {
                            id: 1,
                            number: '11',
                        },
                        {
                            id: 2,
                            number: '689',
                        },
                        {
                            id: 3,
                            number: '117a',
                        },
                    ],
                },
                {
                    id: 2,
                    nome: 'Name of street 2',
                    houses: [
                        {
                            id: 4,
                            number: '02',
                        },
                        {
                            id: 5,
                            number: '655',
                        },
                        {
                            id: 6,
                            number: '11b',
                        },
                    ],
                },
            ],
        },
    ],
};

我想使用.map()函数对其进行迭代,以创建像这样的example的节列表 但是我无法在街道阵列中迭代房屋的数字阵列。 有没有办法使用React Native做到这一点? 预先非常感谢

2 个答案:

答案 0 :(得分:1)

您需要一张地图来遍历整个领土,然后遍历街道和房屋。 将代码复制粘贴到codesandbox.io react sandbox中。您可以修复HTML以使用表格

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const state = {
  territories: [
    {
      id: 1,
      number: 1,
      title: "Territory 1",
      streets: [
        {
          id: 1,
          name: "Name of street 1",
          houses: [
            {
              id: 1,
              number: "11"
            },
            {
              id: 2,
              number: "689"
            },
            {
              id: 3,
              number: "117a"
            }
          ]
        },
        {
          id: 2,
          name: "Name of street 2",
          houses: [
            {
              id: 4,
              number: "02"
            },
            {
              id: 5,
              number: "655"
            },
            {
              id: 6,
              number: "11b"
            }
          ]
        }
      ]
    }
  ]
};

function App() {
  return state.territories.map(territory => {
    return territory.streets.map(street => {
      return (
        <div>
          <p>{street.name}</p>
          {street.houses.map(house => <div>{house.number} </div>)}
        </div>
      );
    });
  });
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

答案 1 :(得分:0)

我将从编写streetRender函数开始,该函数将获取单个街道对象并通过执行street.map并通过房屋进行迭代来呈现它。这应该是一个简单的地图调用。

现在,我将编写一个ritriterRender函数,该函数将获得一个地区,执行ritering.map,按街道迭代,并针对每条街道执行

return (streetRender(street));

最后一步将是执行territories.map,并在每个地区执行

return (territoryRender(territory))