【问题标题】：How to loop through an array of data in React-native?如何在 React-native 中循环遍历一组数据？
【发布时间】：2022-01-19 07:10:21
【问题描述】：

使用了map函数，但它在console.log上返回无限循环，我无法返回行，jsx也尝试了foreach，但没有帮助。无法在 jsx 中呈现数据。即使在循环内也可以控制台.log 数据。但不在渲染 jsx 上。

import React, { Component } from 'react';
import { TouchableOpacity,DrawerLayoutAndroid,Picker,ListView } from 'react-native';
import { Container, Header, Title, Content,List, ListItem, Text, Button, Icon,InputGroup, Input,View } from 'native-base';
import { Col, Row, Grid } from 'react-native-easy-grid';
import { Actions } from 'react-native-router-flux';
import axios from 'axios';
import styles from '../styles/homestyle';
export default class Home extends Component {

constructor(props) {

super(props);

this.state = {
  user_namez : "",
  user_pazz : "",
};
}
student_data(){

axios.get('http://192.168.0.108/easy_backend/app/app_db/stud_data')

.then((response) => {

  let respdata = response.data ;

  list.respdata(function(y){

    return(<Text>{y.prnt_usernamez}</Text>);

  });

  });

  }

  render() {

   return (

   <View>

    {this.student_data()}

    </View>
    ) 

   } 



   }

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

student_data() 不返回任何内容。因此，student_data() 将永远不会呈现任何内容。

对于异步调用，您必须使用componentDidMount()。

在主页state中添加一个节点response: [],，
填入componentDidMount()函数
然后在render()方法中循环this.state.response

类似：

    export default class Home extends Component {
        constructor(props) {
            super(props);

            this.state = {
                response: [],
                user_namez: "",
                user_pazz: "",
            };
        }

        componentDidMount() {
            axios.get('http://192.168.0.108/easy_backend/app/app_db/stud_data')
            .then((response) => {
                //as soon as the state is updated, component will render using updated values
                this.setState({ response: response});
            });
        }

        render() {
            return (
                <View>
                    {
                        this.state.response.map((y) => {
                            return (<Text>{y.prnt_usernamez}</Text>);
                        })
                    }
                </View>
            );
        }
    }

【讨论】：

【解决方案2】：

在 React 中循环遍历数组和对象的不同方法

Javascript — map()

{arrayData.map(d => {
  return (<Text>{d.element_key}</Text>);
})}

Javascript 循环

for (statement 1; statement 2; statement 3) {
  // code block to be executed
}

Javascript forEach 循环

data.forEach(
   function(d){
     forEachData += '<li>' + d.name + '</li>'
    }
 )

【讨论】：