Плоский список отображается только при наличии 2 или более объектов - PullRequest
Новая
       37

Плоский список отображается только при наличии 2 или более объектов

0 голосов
/ 15 июня 2019

Я пытаюсь отобразить некоторых пользователей из моей базы данных в виде плоского списка, поэтому я беру данные и помещаю их в массив в this.state, когда я регистрирую переменную, в которой всегда содержатся данные, проблема в том, что переменнаятолько 1 элемент, он не рендерится, но когда у меня есть 2 или более элементов, он отображается правильно. 

constructor(props) {
    super(props)
    this.state = {
      isLoading: true,
      userData: null,
      Match: []
   }
  }

   componentDidMount() {
    user = firebase.auth().currentUser;
      firebase.database().ref('/users/' + user.uid).once('value').then(snapshot => {

      pro = snapshot.val()

      this.setState({userData: pro});
});

      var query = firebase.database().ref("users/" + user.uid + "/match").orderByKey();
      query.once("value")
      .then((snapshot)  => {
      snapshot.forEach((childSnapshot)  => {
      // key will be "ada" the first time and "alan" the second time
      var key = childSnapshot.key;
      console.log(key)
      // childData will be the actual contents of the child
      firebase.database().ref('/users/' + key).once('value').then(snapshot => {

        pro = snapshot.val()
        console.log(pro)
        photo = pro.photo[0] 
        this.state.Match.push({id: key, name: pro.name, uri: {uri: photo} })

        });
      })
    }).then(
        this.setState({isLoading: false})
    );;

  }



render() {
  if (this.state.isLoading == false ) {
    return (
      <View style={styles.main_container}>
      <View style={styles.statusBar}>
        <StatusBar
        hidden = {false}
        backgroundColor="#F1D145"
        ></StatusBar>
        </View>
        <FlatList
        data={this.state.Match}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({item}) => 

        <TouchableOpacity 
        onPress={null}
        style={styles.Item}>
        <Image
          source={item.uri}
          style={{width: 100, height: 100, borderRadius: 20}} />
        <Text
        style={{ color: 'black', textAlign: 'center', fontSize: 24 }}>
          {item.name}
        </Text>
        </TouchableOpacity>
      }
        />
      </View>
    )
} else {
  return (
    <View style={styles.loading_container}>
      <ActivityIndicator size='large' />
    </View>
  )
}


}
}

Я думаю, что проблема возникает из-за времени загрузки, но это не должно вызывать только загрузку активностикогда все закончится с: 


.then(
        this.setState({isLoading: false})
    );;
...