将 Firebase 实时数据库与 React Native 应用程序集成

Question

我第一次学习状态，并按照一个简单的教程创建了一个 react native 应用程序。本教程没有介绍如何使用 firebase，所以这是我拼凑的。它“有效”，但不会在第一次渲染时提取数据库数据。我知道这是因为获取数据与我的应用程序渲染相比需要时间延迟。但我不知道我应该如何移动逻辑来解决它。我觉得我应该以某种方式使用 .then ？还是我做的这一切完全错了……

import {db} from '../../src/config.js';

let initialMessages = [];
db.ref().once('value', (snapshot) =>{
  snapshot.forEach((child)=>{
    child.forEach(function(childChildSnapshot) {
      initialMessages.push({
        id: childChildSnapshot.key,
        title: childChildSnapshot.val().title,
      })
    })
  })
})
.then()
.catch((error) => {console.error('Error:', error)});

function MessagesScreen(props) {
  const [messages, setMessages] = useState(initialMessages);
  return (
    <Screens>
      <View style={styles.wholeThing}>
         <FlatList
          data={messages}
          keyExtractor={(messages) => messages.id.toString()}
          renderItem={({ item }) => (
            <Card
              title={item.title}
              onPress={() => console.log("hi")}
            />
          )}
          ItemSeparatorComponent={ListItemSeparator}
          contentContainerStyle={styles.messagesList}
          refreshing={refreshing}
          onRefresh={}
        />
      </View>
    </Screens>
  );
}

export default MessagesScreen;

Answer 1

当您将initialMessages 传递给状态挂钩（作为其初始值）时，initialMessages.push(...) 尚未被调用。

相反，您需要在数据加载后调用setMessages：

db.ref().once('value', (snapshot) =>{
  snapshot.forEach((child)=>{
    child.forEach(function(childChildSnapshot) {
      initialMessages.push({
        id: childChildSnapshot.key,
        title: childChildSnapshot.val().title,
      })
    })
    setMessages(initialMessages);
  })
})

调用setMessages 将重新呈现（受影响的）用户界面，并显示消息。

这当然意味着您需要将useState 钩子从MessagesScreen 中拉出，以便它在您现在调用setMessages 的位置也可见。 p>