renderViewのrenderRow内の配列を反復する、React-Native

Question

コードが の場合モバイル画面にさまざまなプロパティを表示するにはどうすればよいですか？ コンソールに印刷されたオブジェクトの配列を見ることができますが、各オブジェクトに含まれるプロパティを使用してモバイル画面に情報を表示することはできません。

import React, { Component } from 'react'; 
import { AppRegistry, ListView, View, Text } from 'react-native'; 
import axios from 'axios'; 

export default class Component5 extends Component { 
    constructor() { 
    super(); 
    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); 
    this.state = { 
     userDataSource: ds, 
    }; 
    } 
    componentDidMount() { 
    this.fetchUsers(); 
    } 
    fetchUsers() { 
    axios.get('https://stageapi6.devmn.net/api/v1/forums/threads?topic_id=2418', { 
     headers: { 
     'client-id': '********' 
     } 
    }) 
    .then(response => this.setState({ userDataSource: this.state.userDataSource.cloneWithRows(response) })); 
    } 

    renderRow = (user) => { 
    console.log(user); // => [Object, Object, Object, Object .........] 

    return (
     <View> 
     {/* I need a way to iterate the bojects and display the properties inside teh Text tags, the code below doesn't work */} 
     <Text>{user.thread.num_posts}</Text> 
     <Text>{user.thread.topic_name}</Text> 
     <Text>{user.thread.name}</Text> 
     </View> 
    ); 
    } 
    render() { 
     return (
     <ListView 
      dataSource={this.state.userDataSource} 
      renderRow={(user) => this.renderRow(user.threads)} 
     /> 
    ); 
    } 
} 

AppRegistry.registerComponent('Component5',() => Component5); 

SCREENSHOT OF THE RETURNED ARRAY OF OBJECTS AND ITS PROPERTIES

Answer 1

あなたはuser配列を反復処理し、その場でJSXを構築する必要があります。以下のようなものを使用してください

renderRow = (user) => { 
return (
    <View> 
    { user.map(u => 
      (<View key={u.thread.id}> 
       <Text>{u.thread.num_posts}</Text> 
       <Text>{u.thread.topic_name}</Text> 
       <Text>{u.thread.name}</Text> 
       <View>)); 
    } 
    </View> 
); 
} 

Answer 2

私は前の回答にコメントすることはできませんが動作するはずです。あなたがCannot read property 'map' of undefinedのuserのパラメータをrenderRowに渡していることを示すようになっている上記のエラーが表示されている場合は、配列またはその空でないか、問題があります。その部分を解決することに集中してください。

fetchUsers関数のコードスニペットをBabel replに貼り付けました。これは私が見たものです。それはthisあなたがthis.state.userDataSourceのために参照されているように見えます

を参照するには、正しいthisではありません。

うまくいけば、これは助けを何とか