Wie durchläuft ein Array von Daten in React-native?

Question

Map-Funktion wird verwendet, aber es gibt Endlosschleife auf console.log und ich kann nicht die Zeilen im Gegenzug jsx auch versucht die Foreach, aber es ist keine Hilfe. kann die Daten nicht in jsx rendern. Es ist möglich, die Daten auch innerhalb der Schleife zu loggen. aber nicht auf dem Rendern 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> 
    ) 

    } 



    } 

Answer 1

student_data() gibt nichts zurück. So wird nichts von student_data() nie rendern.

Für asynchrone Anrufe müssen Sie componentDidMount() verwenden.

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