this.state.users 是一个数组，但仍然没有在 FlatList 中呈现

Question

那么我现在做什么：我正在为我的 React Native 项目使用 Firebase。用户在中写入另一个用户的电子邮件。然后检查此电子邮件是否存在于数据库中。如果电子邮件存在，那么它将作为数组写入状态中的 users=[] 并且应该在 FlatList.

中呈现

除一件事外一切正常：尽管我有一个数组，但 FlatList 不呈现任何内容。

这就是我从 console.log（用户）那里收到的信息：

 [{...}]
  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>
);
}

所以问题是我做错了什么？我该如何解决？

Answer 1

所以我发现了一个错误。同样是太简单太愚蠢了。

我刚刚在渲染中删除了这个组件，一切正常。

  <View style = {styles.contentContainer}>

Answer 2

尝试替换这个...

<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}
   />

这不会解决您的问题，但这是我建议的故障排除步骤。

this.state.users 是一个数组，但仍然没有在 FlatList 中呈现

this.state.users is an array, but still doesn't render in FlatList

javascript

firebase

react-native

firebase-realtime-database

react-native-flatlist