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

Posted 2023-02-22

技术标签:

【中文标题】如何在 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，按房子进行迭代。这应该是一个简单的地图调用。

现在我将编写一个域渲染函数，它获取单个区域，执行区域地图，按街道迭代，并为每条街道执行