React Native Component Not Rendering

Question

我有兩個類，ActivityList和ActivityDetail。 ActivityList查詢一些數據，然後用它接收的信息調用ActivityDetail。我控制檯記錄了信息，並檢查它是否以期望的形式出現。它是。但是，出於某種原因，ActivityDetal不會呈現到ActivityList中。

ActivityList.js

import React, { Component } from 'react'; 
 
import { ScrollView } from 'react-native'; 
 
import firebase from 'firebase'; 
 
import ActivityDetail from './ActivityDetail'; 
 
import { getCurrentUser } from '../../models/User'; 
 

 
class ActivityList extends Component { 
 
    getActivityList() { 
 
    getCurrentUser() 
 
    .then(currentUser => currentUser.teacherList.map(batch => firebase.database().ref(`/batches/${batch}`) 
 
    .once('value') 
 
    .then(Class => firebase.database().ref(`/users/teachers/${Class.val().Teacher}`) 
 
    .once('value') 
 
    .then(teacher => this.renderActivityList(teacher.val()))))); 
 
    } 
 

 
    renderActivityList(teacher) { 
 
    console.log(teacher); 
 
    return <ActivityDetail key={teacher.Name} person={teacher} />; 
 
    } 
 

 
    render() { 
 
    return (
 
     <ScrollView> 
 
     {this.getActivityList()} 
 
     </ScrollView> 
 
    ); 
 
    } 
 
} 
 

 
export { ActivityList };

ActivityDetail.js

import React from 'react'; 
 
import { Text, Image, View, Dimensions } from 'react-native'; 
 
import { Card, CardSection } from './'; 
 

 

 
const { width } = Dimensions.get('window'); 
 

 
const ActivityDetail = ({ person }) => { 
 
    console.log('working'); 
 
    return (
 
    <Card style={{ flex: 1, flexDirection: 'row' }}> 
 
     <CardSection> 
 
     <Image style={styles.headerStyle} source={{ uri: person.Header }} /> 
 
     <View style={styles.containerStyle}> 
 
      <Image style={styles.profileStyle} source={{ uri: person.Profile }} /> 
 
     </View> 
 
     <View style={{ width: 0.93 * width, height: 0.09 * width }} /> 
 
     </CardSection> 
 
     <CardSection> 
 
     <View style={styles.textContainerStyle}> 
 
      <Text style={styles.nameStyle}>{person.Name}</Text> 
 
      <Text style={styles.classStyle}>{person.Subject}</Text> 
 
     </View> 
 
     </CardSection> 
 
    </Card> 
 
); 
 
}; 
 

 
const styles = { 
 
    profileStyle: { 
 
    height: 0.13 * width, 
 
    width: 0.13 * width, 
 
    alignSelf: 'center', 
 
    resizeMode: 'cover', 
 
    }, 
 
    containerStyle: { 
 
    width: 0.18 * width, 
 
    height: 0.18 * width, 
 
    borderRadius: (0.18 * width)/2, 
 
    backgroundColor: '#d5d5d5', 
 
    paddingLeft: 5, 
 
    paddingRight: 5, 
 
    justifyContent: 'center', 
 
    alignItems: 'center', 
 
    alignSelf: 'center', 
 
    top: 65, 
 
    position: 'absolute', 
 
    }, 
 
    nameStyle: { 
 
    fontSize: 20, 
 
    color: '#000', 
 
    paddingBottom: 5, 
 
    }, 
 
    headerStyle: { 
 
    width: 0.93 * width, 
 
    height: 0.25 * width, 
 
    borderRadius: 4, 
 
    flex: 2, 
 
    }, 
 
    textContainerStyle: { 
 
    justifyContent: 'center', 
 
    alignItems: 'center', 
 
    flex: 1, 
 
    }, 
 
    classStyle: { 
 
    fontSize: 18, 
 
    color: '#aaa', 
 
    }, 
 
}; 
 

 
export default ActivityDetail;

Answer 1

這裏的問題是，在您的ActivityList組件的渲染函數中，您正在渲染this.getActivityList的結果，該結果始終未定義。

您應該觸發componentWillMount中的數據提取，並使用setState將數據設置爲用於渲染的組件狀態。

例如

class ActivityList extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { teacher: {} }; 
    } 

    componentWillMount() { 
    this.getActivityList(); 
    } 

    getActivityList() { 
    ... // get Data 
    this.setState({ teacher : data }); 
    } 

    render() { 
    return (
     <ScrollView> 
     <ActivityDetail key={this.state.teacher.Name} person={this.state.teacher} /> 
     </ScrollView> 
    ); 
    } 
}