我开始在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做到这一点? 预先非常感谢
答案 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))