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将数据设置为组件状态以进行渲染。

e.g。

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

React Native Component Not Rendering

1 个答案: