Question

那我现在要做什么：我正在将Firebase用于我的React Native项目。该用户在中写入其他用户的电子邮件。然后检查此电子邮件是否存在于数据库中。如果电子邮件存在，则会以数组形式写入状态为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

2 个答案: