React-native에서 데이터 배열을 반복하는 방법은 무엇입니까?

Question

map 함수가 사용되지만 console.log에서 끝없는 루프를 반환하고 jsx가 행을 렌더링 할 수 없지만 foreach를 시도했지만 도움이되지 않습니다. 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> 
      ); 
     } 
    }