在刷新完成之前，React Native任务不会呈现

Question

我有一个React Native组件，用于在类似tinder的卡片堆栈中呈现任务。它从Firebase后端获取异步任务，并将其呈现为名为 Swiper 的卡片组。它还有三个按钮，前一个下一个和刷新，所有这些按钮都可以获得另一个任务并呈现卡片。它似乎工作，但只有在刷新/下一个/上一个被调用之后，直到那时卡堆栈为空。

但是，console.log()中的ComponentDidMount()与getMore()具有相同的任务数据。同样在初始渲染时，有一个小的分页，显示有一个任务加载，而不是实际的卡。

为什么卡片在初始加载时不显示？

import React, { PureComponent, Component } from 'react';
import FitImage from 'react-native-fit-image';
import {View, H6, Text, StyleSheet,TouchableOpacity, Image} from "react-native";
import {inject, observer} from "mobx-react/native";
import moment from "moment";
import {Task as ITask} from "../Model";  
import {Avatar, Styles,Task, Firebase, Circle, BaseContainer} from "../components";
import {H3,Content, Card, CardItem, Thumbnail, Button, Icon, Left, Body, Right, Tab, Tabs, TabHeading, H1, H2} from "native-base";
import variables from "../../native-base-theme/variables/commonColor";

import Swiper from 'react-native-swiper-animated';

export default class Lists extends Component {
    render(): React$Element<*> {
        return <BaseContainer title="Feed" navigation={this.props.navigation}>
            <Feed />
        </BaseContainer>;
    }
}


export class Feed extends PureComponent {
  swiper = null;
  prev = () => {
    this.swiper.forceLeftSwipe();
    this.getMore();
  }
  next = () => {
    this.swiper.forceRightSwipe();
    this.getMore();
  }
  constructor(props) {
    super(props);
    this.state = { taskList: undefined } ;
  }
  getMore() {
   Firebase.taskRef.limitToLast(1).on("value",snapshot => {
    let tasks= _.map(snapshot.val(), task => task)
        .filter(task => {
            ;
            return !task.done;
        });
        if (tasks.length > 0) {
            tasks = tasks.map((task, key) => (
                <Task {...{task, key}} />
            ));
        }
        else tasks= [];
    this.setState({ taskList: tasks });
    console.log(this.state.taskList);
  });
}
componentDidMount() {
  Firebase.taskRef.limitToLast(1).on("value",snapshot => {
    let tasks= _.map(snapshot.val(), task => task);
    if (tasks.length > 0) {
        tasks = tasks.map((task, key) => (
            <Task {...{task, key}} />
        );
    }
    else tasks= [];
    this.setState({ taskList: tasks })
    console.log(this.state.taskList);
  });
}
render() {
    return (
      <View style={{ flex: 1 }}> 
         <Swiper
           ref={(swiper) => {
             this.swiper = swiper;
           }}
           showPagination={true}
           paginationStyle={{ container: { backgroundColor: 'transparent' } }}
           paginationLeft={''}
           paginationRight={''}
           swiper={false}
         >
         { this.state.taskList }
        </Swiper>   
        <View style={styles.buttonContainer}>
            <Button danger style={{alignSelf: 'center', height: 65, borderRadius: 100,width:65, marginRight: 20}} onPress={this.prev} >
                <Icon style={{fontSize: 30}} active name='thumbs-down' />
            </Button>
            <Button style={{backgroundColor: '#d8d8d8', alignSelf:'center', borderRadius: 100, width: 80, alignItems:'center', justifyContent:'center', height: 80}} onPress={this.next} >
                <Icon style={{fontSize: 50}} active name='md-sync' />
            </Button>
            <Button success style={{alignSelf: 'center', height: 65, borderRadius: 100,width:65, marginLeft: 20}} onPress={this.next} >
                <Icon style={{fontSize: 30}} active name='thumbs-up' />
            </Button>
        </View>
      </View>
    );
  }
}