如何在 React Native 中使用数组对象迭代数组
Posted
技术标签:
【中文标题】如何在 React Native 中使用数组对象迭代数组【英文标题】:How to iterate array with an array object in React Native 【发布时间】:2018-12-02 11:23:42 【问题描述】:我开始在 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 做到这一点? 提前非常感谢您
【问题讨论】:
【参考方案1】:您需要一张地图来遍历领土,然后遍历街道和房屋。 将代码复制粘贴到codesandbox.io 反应沙箱中。您可以修复 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);
【讨论】:
【参考方案2】:我将首先编写一个 streetRender 函数,该函数将获取一个街道对象并渲染它,方法是执行 street.map,按房子进行迭代。这应该是一个简单的地图调用。
现在我将编写一个域渲染函数,它获取单个区域,执行区域地图,按街道迭代,并为每条街道执行
return (streetRender(street));
最后一步是执行区域地图,并为每个区域执行
return (territoryRender(territory))
【讨论】:
这将是为了组织代码并帮助我! 我很高兴。这就是想法:)以上是关于如何在 React Native 中使用数组对象迭代数组的主要内容,如果未能解决你的问题,请参考以下文章
React / React Native:如何映射数组并在卡片上显示数据
使用 textInput React Native 更新数组对象中处于状态的元素
如何映射一组对象,删除一个并将我的状态设置为 react-native 中的新数组?