React-nativeのデータ配列をループする方法は？

Question

map関数が使用されていますが、console.logに無限ループを返し、jsxが返す行をレンダリングできません。 jsxでデータをレンダリングできません。ループ内でもデータをコンソール化することが可能です。レンダリング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()は何も返しません。したがって、何も決してstudent_data()からレンダリングされません。

非同期呼び出しの場合は、componentDidMount()を使用する必要があります。

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