listview - 在 ListView、React-Native 中迭代 renderRow 内的对象数组

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