this.state.users является массивом, но все еще не отображается в FlatList - PullRequest
Новая
       46

this.state.users является массивом, но все еще не отображается в FlatList

0 голосов
/ 16 декабря 2018

Итак, что я делаю сейчас: я использую Firebase для своего проекта React Native.Пользователь пишет письмо другого пользователя в.Затем происходит проверка, существует ли это письмо в базе данных.Если электронная почта существует, то она записывается в виде массива для users = [] в состоянии и должна отображаться в FlatList.

Все работает хорошо, кроме одной вещи: FlatList ничего не отображает, хотя у меня есть массив.

Вот что я получаю из console.log (users): 

 [{...}]
  0:
    email: "test@gmail.com"
    id: "-LSVedv_anPyD3We-4_Q"

Вот так выглядит мой код: 

 state = {
  promptVisible: false,
  loading: false,
  users: []
 };

findUserEmail = (email) => {
 firebase.database()
 .ref(`/users`)
 .orderByChild("email")
 .equalTo(email)
 .once("value")
 .then(snapshot => {
  if (snapshot.val()) {
    const value = snapshot.val()
    this.setState({ users: Object.keys(value).map((id) => ({
      id,
      ...value[id]
    })), promptVisible: false})
  } else {
    Alert.alert("Email doesn't exist")
  }
  })
 }

 renderItem({item}) {
  return (
 <View style = {styles.contactContainer}>
  <View style={styles.userRow}>
    <View style={styles.userImage}>
      <Avatar
        width={60}
        rounded
        source={{
          uri: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Matterhorn_from_Domhütte_-_2.jpg/1200px-Matterhorn_from_Domhütte_-_2.jpg"
        }}
      />
    </View>
     <View>
      <View style={styles.emailBackground}>
       <Text
         style = {styles.contact} >
         {item.email}
       </Text>
       </View>
       <Text
          style = {styles.message} >
          Da inne lauft öpis...
       </Text>
      </View>
     </View>
   </View>
 )
 }

 render() {
  console.log(this.state.users);
   if (this.state.loading) {
return (
  <View style={{alignItems: 'center', justifyContent: 'center', flex: 1}}>
    <ActivityIndicator size="large" color="dodgerblue" />
  </View>
)
    }
    return (
<View style={styles.container}>
 <Header
   centerComponent={{ text: 'Nachrichten', style: { color: '#FF0000', fontSize: 20, fontWeight: 'bold' } }}
   outerContainerStyles={{ backgroundColor: '#ffffff' }}
   rightComponent={this.renderButton()}
 />
 <View style = {styles.contentContainer}>
  <FlatList
   data={this.state.users}
   renderItem={this.renderItem}
   keyExtractor={item => item.email}
   />
 </View>
  <Prompt
    title="Email eingeben"
    placeholder="Email"
    visible={this.state.promptVisible}
    onCancel={() => this.setState({promptVisible: false})}
    onSubmit={(email) => this.findUserEmail(email)} />
</View>
);
}

Итак, вопрос в том, что мне делатьделать неправильно?И как я могу это исправить?

Ответы [ 2 ]

0 голосов
/ 18 декабря 2018

Попробуйте заменить это ... 

<FlatList
   data={this.state.users}
   renderItem={this.renderItem}
   keyExtractor={item => item.email}
   />

Статическим, заполненным объектами массивом в форме, которая, как вы ожидаете, будет выглядеть this.state.users.Вот пример ... 

<FlatList
   data={[{id: "A", email: "testA@gmail.com"},{id: "B", email: "testB@gmail.com"}]}
   renderItem={this.renderItem}
   keyExtractor={item => item.email}
   />

Это не решит вашу проблему, но это то, что я предлагал в качестве шага по устранению неполадок.

0 голосов
/ 17 декабря 2018

Итак, я нашел ошибку.Это было слишком просто и глупо таким же образом.

Я просто удалил этот компонент в рендере, и все работало нормально. 

  <View style = {styles.contentContainer}>
...