React-Nativeで非同期フェッチのレスポンスを要素としてレンダリングしますか？

Question

フェッチを使用してAPIから戻ってくるデータの配列があります。私は解析し、私のアプリの要素としてjsonの応答をレンダリングしようとしていますが、私は運がないよ、私のコードを固定して非同期データを要素としてレンダリングする方法は？

class Profile extends React.PureComponent { 
    static propTypes = { 
    navigation: PropTypes.object, 
    handleLogout: PropTypes.func, 
    user: PropTypes.object, 
    }; 

    static navigationOptions = { 
    headerVisible: true, 
    title: 'Profile', 
    }; 

constructor(props) { 
    super(props); 

    this.state = { 
    data: [] 
    }; 
    } 

componentDidMount() { 
fetch("http://10.0.2.2:8080/combined", 
{ method: 'get' }) 
.then(function(response) { 
    var data = response.json(); 
    console.log(data) 
    this.setState({ data }) 

}) 
    .catch(function(err) { } 

    ); 
    }; 


    logout =() => { 
    const callback =() => { 
     const resetAction = NavigationActions.reset({ 
     index: 0, 
     actions: [NavigationActions.navigate({ routeName: 'SignIn' })], 
     }); 
     this.props.navigation.dispatch(resetAction); 
    }; 
    this.props.handleLogout(callback); 
    }; 



    jsonData() { 
    return this.state.data.map(function(rows, i){ 
    return(
     <View key={i}> 
     <Text>{rows.FIRSTNAME}</Text> 
     </View> 
    ); 
    }); 
} 

    render() { 

    const { user } = this.props; 
    let email; 

    return (
     <ContentWrapper> 
     <View style={styles.container}> 
      <Image style={styles.header} source={images.profileHeader} /> 
      <View style={styles.body}> 
      <Avatar email={email} style={styles.avatar} /> 
      <Text style={styles.email}>{_.capitalize(email)}</Text> 
      {jsonData()} 
      <Button 
       title="Log out" 
       icon={{ name: 'logout-variant', type: 'material-community' }} 
       onPress={this.logout} 
       style={styles.logoutButton} 
      /> 
      </View> 
     </View> 
     </ContentWrapper> 
    ); 
    } 


} 



export default Profile; 

Answer 1

はresponse.json()が同様に非同期であり、あなたが期待するようPromise、ないデータを返し、覚えておいてください。

...

componentDidMount() { 
    fetch("http://10.0.2.2:8080/combined", { method: 'get' }) 
    .then(response => response.json()) 
    .then(data => { 
     this.setState({ data }) 
    }) 
    .catch(function(err) { 
    // 
    }) 
} 

をこれにフェッチを担当するコードを調整し、あなたが行ってもいいです

Answer 2

データは、長さを持っている場合にのみレンダリングするので、あなたはそれを設定することができます。

jsonData =() => (this.state.data.length ? this.state.data.map((rows, i) => (
    <View key={i}> 
    <Text>{rows.FIRSTNAME}</Text> 
    </View> 
)) : null)