javascript - 在使用 Firebase 的 React-native GiftedChat 聊天应用程序中加载早期消息时遇到问题

Question

我一直在使用 Gifted-Chat 和 Firebase RealTime 数据库开发一个聊天应用程序（并使用 Expo 运行它）。此时，基本消息传递工作，但我试图让应用程序在用户向上滚动并点击出现的按钮时加载较早的消息（我知道 GiftedChat 道具）。不幸的是，我在这样做时遇到了麻烦，并且有点难过。

我知道有两个不同的问题。

单击 loadEarlier 按钮会给我一个undefined is not a function (near '...this.setState...'运行时错误（显然，我放在那里的骨架函数有问题）。
更大的问题是我仍然不清楚如何在当前加载最旧的消息之前下载n条消息。我已经查看了 GiftedChat 示例和这篇文章寻求帮助，但必须承认我仍然迷路（我能想到的最好的办法是我需要对消息进行排序，可能按时间戳，以某种方式获得正确的范围，然后解析它们并将它们添加到状态中的消息数组中，但我无法弄清楚如何执行此操作，尤其是后面的部分）。

下面是我的聊天屏幕代码的相关部分，以及我的 firebase 数据库结构的屏幕截图。对于这两个问题，我将不胜感激。

// Your run of the mill React-Native imports.
import React, { Component } from 'react';
import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
import * as firebase from 'firebase';
// Our custom components.
import { Input } from '../components/Input';
import { Button } from '../components/Button';
import { BotButton } from '../components/BotButton';
// Array of potential bot responses. Might be a fancy schmancy Markov
// chain like thing in the future.
import {botResponses} from '../Constants.js';
// Gifted-chat import. The library takes care of fun stuff like
// rendering message bubbles and having a message composer.
import { GiftedChat } from 'react-native-gifted-chat';
// To keep keyboard from covering up text input.
import { KeyboardAvoidingView } from 'react-native';
// Because keyboard avoiding behavior is platform specific.
import {Platform} from 'react-native';

console.disableYellowBox = true;

class Chat extends Component {
    state = {
        messages: [],
        isLoadingEarlier: false,
    };

    // Reference to where in Firebase DB messages will be stored.
    get ref() {
        return firebase.database().ref('messages');
    }

    onLoadEarlier() {
        this.setState((previousState) => {
          return {
            isLoadingEarlier: true,
          };
        });
        console.log(this.state.isLoadingEarlier)
        this.setState((previousState) => {
            return {
                isLoadingEarlier: false,
            };
        });
    }

    // Get last 20 messages, any incoming messages, and send them to parse.
    on = callback =>
        this.ref
          .limitToLast(20)
          .on('child_added', snapshot => callback(this.parse(snapshot)));
    parse = snapshot => {
        // Return whatever is associated with snapshot.
        const { timestamp: numberStamp, text, user } = snapshot.val();
        const { key: _id } = snapshot;
        // Convert timestamp to JS date object.
        const timestamp = new Date(numberStamp);
        // Create object for Gifted Chat. id is unique.
        const message = {
            _id,
            timestamp,
            text,
            user,
        };
        return message;
    };
    // To unsubscribe from database
    off() {
        this.ref.off();
    }

    // Helper function to get user UID.
    get uid() {
        return (firebase.auth().currentUser || {}).uid;
    }
    // Get timestamp for saving messages.
    get timestamp() {
        return firebase.database.ServerValue.TIMESTAMP;
    }

    // Helper function that takes array of messages and prepares all of
    // them to be sent.
    send = messages => {
        for (let i = 0; i < messages.length; i++) {
            const { text, user } = messages[i];
            const message = {
                text,
                user,
                timestamp: this.timestamp,
            };
            this.append(message);
        }
    };

    // Save message objects. Actually sends them to server.
    append = message => this.ref.push(message);

    // When we open the chat, start looking for messages.
    componentDidMount() {
        this.on(message =>
          this.setState(previousState => ({
              messages: GiftedChat.append(previousState.messages, message),
          }))
        );
    }
    get user() {
        // Return name and UID for GiftedChat to parse
        return {
            name: this.props.navigation.state.params.name,
            _id: this.uid,
        };
    }
    // Unsubscribe when we close the chat screen.
    componentWillUnmount() {
        this.off();
    }

    render() {
        return (
        <View>
            <GiftedChat
                loadEarlier={true}
                onLoadEarlier={this.onLoadEarlier}
                isLoadingEarlier={this.state.isLoadingEarlier}
                messages={this.state.messages}
                onSend={this.send}
                user={this.user}
            />
         </View>
        );
    }

}
export default Chat;

score 1 · Accepted Answer

对于您的第一个问题，您应该声明您的onLoadEarlierwith=>函数以获取当前实例，this即您的代码应如下所示：

onLoadEarlier = () => {
    this.setState((previousState) => {
      return {
        isLoadingEarlier: true,
      };
    }, () => {
       console.log(this.state.isLoadingEarlier)
       this.setState((previousState) => {
          return {
             isLoadingEarlier: false,
          };
       });
    }); 
}

此外，setState它本质上是异步的，因此您应该依赖setStateie 回调的第二个参数来确保下一行代码同步执行。

最后，如果你使用class语法，那么你应该constructor像下面这样声明状态：

class Chat extends Component {
   constructor (props) {
      super (props);
      state = {
         messages: [],
         isLoadingEarlier: false,
      };
   }
  ......

    onLoadEarlier = () => {
      this.setState((previousState) => {
        return {
          isLoadingEarlier: true,
        };
      }, () => {
         console.log(this.state.isLoadingEarlier)
         this.setState((previousState) => {
            return {
               isLoadingEarlier: false,
            };
         });
      }); 
  }
  ...
}

score 0 · Accepted Answer

对于第二个问题，应该与这个问题相同，Firebase on and once different?

您可以在 Firebase 中使用过滤器功能，例如使用 createdAt 字段与上次加载的消息进行比较以加载更多信息。

score 0 · Accepted Answer

要从 firebase 加载最后一条消息，我建议您在参考中使用 limitToLast 函数。之后，您应该在天才聊天中调用 append 之前按日期排序结果。

javascript - 在使用 Firebase 的 React-native GiftedChat 聊天应用程序中加载早期消息时遇到问题

3 回答 3

Related

Reference