如何在 React-native 中循环遍历数据数组?

问题描述

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

map function is used but it returns endless loop on console.log and i cannot render the rows in return jsx also tried the foreach but its no help. cannot render the data in jsx. its possible to console .log the data even inside the the loop . but not on the render 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>
    )

   }



   }

推荐答案

student_data() 不返回任何内容.因此，student_data() 永远不会渲染任何内容.

student_data() doesn't return anything. So nothing will never render from student_data().

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

For asyncronous calls, you must use componentDidMount().

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

• add a node response: [], in Home state,
• fill it in a componentDidMount() function
• Then loop on this.state.response in the render() method

类似于:

    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>
            );
        }
    }

这篇关于如何在 React-native 中循环遍历数据数组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！