从 Cloud Firestore 获取的聊天历史记录未显示在 React 前端

Question

问题： 尽管数据获取和处理成功，但聊天内容不会出现在 UI 中。有人可以指出可能出了什么问题或建议任何调试步骤吗？

我正在开发一个 Web 应用程序，我从 Cloud Firestore 数据库中获取问答聊天历史记录并将其显示在前端。聊天已成功检索（通过浏览器开发工具中的“网络”选项卡确认），但它们未显示在我的应用程序中。

后端代码： 我有一个 Flask 端点来获取聊天历史记录：

@application.route('/chat-history', methods=['POST'])
def get_user_chat_history():
    user_id = request.json['user_id']
    document_id = request.json['document_id']

    if not user_id or not document_id:
        return jsonify({"error": "Missing required parameters: user and document"}), 400

    user_chats_ref = db.collection("ChatHistory").document(user_id).collection(str(document_id)).document("chats")

    try:
        chat_doc = user_chats_ref.get()

        if not chat_doc.exists:
            return jsonify({"error": "No chat history found"}), 404

        chat_data = chat_doc.to_dict()
        chat_array = chat_data.get('chat', [])

        sorted_chat_array = sorted(chat_array, key=lambda x: float(x['timestamp']), reverse=True)

        return jsonify(sorted_chat_array), 200

    except Exception as e:
        print(f'Error fetching chat history for user {user_id}: {e}')
        return jsonify({"error": "Error fetching chat history"}), 500

前端代码（React）： 这是我尝试显示获取的聊天的 React 代码：

useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      if (!user) {
        navigate("/login");
      }
    });
    populateChat();
    return () => unsubscribe();
}, []);

async function populateChat() {
    const response = await fetch(`${baseurl}/chat-history`, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            user_id: uid,
            document_id: profileName,
        }),
    });

    try {
        const data = await response.json();
        const transformData = (data) => {
            const transformed = [];

            data.forEach((item) => {
                for (const key in item) {
                    item[key].forEach((entry) => {
                        if (entry.question) {
                            transformed.push({ user: "user", message: entry.question });
                        }
                        if (entry.answer) {
                            transformed.push({ user: "bot", message: entry.answer });
                        }
                    });
                }
            });
            return transformed;
        };
        const transformedData = transformData(data);
        const firstFiveTexts = transformedData.slice(0, 6);
        // Assuming you are setting the state somewhere here to update the UI with firstFiveTexts
    } catch (error) {
        console.error('Error fetching chat history:', error);
    }
}

我尝试过的：

• 验证后端返回正确的数据结构。
• 通过浏览器的“网络”选项卡确认数据获取成功。
• 确保 populateChat 函数运行并处理数据。

Answer 1

通过您的调试，我们知道您的后端正常工作，并且您的客户端正确发出请求。

在前端中，您是否尝试过打印代码中获得的响应值？也许您访问的数据是错误的，因为您期望它以不同的格式等。

您知道它已到达客户端，现在您需要查看客户端的问题出在哪里。

1. 浏览器获取它，因此请检查您的代码是否正确访问它
2. 以您期望的格式对虚假数据进行硬编码，以查看您的 UI 在收到数据时是否能够正确显示

我预计您访问的数据是错误的，例如您期望一组聊天消息 [msg, msg] 它实际上是 {data: [msg,msg]} 等

缩小问题所在，然后继续缩小范围，例如，如果您看到硬编码有效，您就知道问题在于如何从请求中获取数据（您知道返回有效数据）