如何在将数据加载到 UseEffect 中的数组后执行排序 - React Native

Question

我正在尝试创建一个聊天应用程序，但出现了一个小问题。每当我从 firebase 加载消息时，它们都会以未排序的顺序出现在聊天应用程序中，因此我尝试按时间戳对消息进行排序，以便它们按顺序显示。如果我在 useEffect 的 onReceive 中移动 sort 和 setMessages，我可以做到这一点，但我觉得这将非常低效，因为它会为从 firebase 检索到的每条消息单独排序和设置消息。在所有消息都加载到数组中之后，我想在最后做这一切。

现在有了我的日志，我明白了：

[REDACTED TIME]  LOG      []
[REDACTED TIME]  LOG      pushing into loadedMessages
[REDACTED TIME]  LOG      pushing into loadedMessages

所以它首先打印（空）数组，然后加载消息。如何确保以正确的顺序完成此操作？

  useEffect(() => {
    // Gets User ID
    fetchUserId(getUserId());

    const messagesRef = firebase.database().ref(`${companySymbol}Messages`);
    messagesRef.off();

    messagesRef.off();
    const onReceive = async (data) => {
      const message = data.val();
      const iMessage = {
        _id: message._id,
        text: message.text,
        createdAt: new Date(message.createdAt),
        user: {
          _id: message.user._id,
          name: message.user.name,
        },
      };
      loadedMessages.push(iMessage);
      console.log('pushing into loadedMessages');
    };
    messagesRef.on('child_added', onReceive);

    loadedMessages.sort(
      (message1, message2) => message2.createdAt - message1.createdAt,
    );

    console.log(loadedMessages);

    return () => {
      console.log('useEffect Return:');
      messagesRef.off();
    };
  }, []);

Answer 1

我认为观点有点偏离。 这样做的正确方法是获取已排序的 firebase 数据。

Firebase 具有内置排序功能，尽管它确实有其局限性。

在我看来，您应该尝试以下方法：

const messagesRef = firebase.database().ref(`${companySymbol}Messages`);

messagesRef.orderByChild("createdAt").on("child_added", function(snapshot) {
  // the callback function once a new message has been created. 
  console.log(snapshot.val()); 
});

如果我可以再添加一件事，一旦您收到超过一千条左右的消息，从时间的尽头带出每条消息可能会有点麻烦，所以我建议限制它。例如，可以使用内置的限制函数limitToLast(1000) 来实现。

祝你好运！

Answer 2

嗯，数据库的名称是“实时数据库”。您正在使用“child_added”侦听器，每次将新对象添加到 Messages 集合时都会触发该侦听器。 onReceive 回调应该进行排序 - 否则消息的顺序将不正确。是的，这对于第一次加载来说效率很低，因为您的“child_added”很可能会为从集合返回的每个项目触发，并且您将重复排序。

您可以探索的替代方法是拥有一个 .once 侦听器：https://firebase.google.com/docs/database/web/read-and-write#read_data_once 第一次在应用中填充数据时。这将返回您需要的所有数据。完成后，您可以创建“child_added”侦听器并仅侦听新对象。这种方式 onReceive 不应该在第一次调用时那么频繁，之后对每一个进入的新项目进行排序已经很有意义了。

也看看排序：https://firebase.google.com/docs/database/web/lists-of-data#sorting_and_filtering_data

您也许能够以正确的顺序返回消息。

此外，如果您需要查询，请查看 firestore...