React 中的 ChatGPT API 无法读取 null 属性（读取“useRef”）错误

Question

因此，我尝试按照此 yt 教程将 chatgpt api 集成到我的代码中。但是，我不断收到“无法读取 null 的属性（读取'useRef'）”的运行时错误。 我已经尝试在 stackoverflow 和 chatGPT 本身上寻找解决方案，但运气不佳！我检查了包兼容性，看起来没问题。我什至试图用更简单的代码让它工作但无济于事！

教程链接如下： https://www.youtube.com/watch?v=Lag9Pj_33hM

这是我的组件 chatbot.js 组件：

import React, { useState } from "react";
import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
import {
  MainContainer,
  ChatContainer,
  Message,
  MessageList,
  MessageInput,
  TypingIndicator,
} from "@chatscope/chat-ui-kit-react";

const API_KEY =
  "my_key";

function Chatbot() {
  const [messages, setMessages] = useState([
    {
      message: "Hello, I'm ChatGPT! Ask me anything!",
      sentTime: "just now",
      sender: "ChatGPT",
    },
  ]);
  const [isTyping, setIsTyping] = useState(false);

  const handleSend = async (message) => {
    const newMessage = {
      message: message,
      sender: "user",
      direction: "outgoing",
      sentTime: "just now",
    };
    const newMessages = [...messages, newMessage];
    setMessages(newMessages);
    setIsTyping(true);
    await processMessageToChatGPT(newMessages);
  };

  async function processMessageToChatGPT(chatMessages) {
    let apiMessages = chatMessages.map((messageObject) => {
      let role = messageObject.sender === "ChatGPT" ? "assistant" : "user";
      return { role: role, content: messageObject.message };
    });

    const systemMessage = {
      role: "system",
      content: "Explain things like you're talking to a software professional.",
    };

    const apiRequestBody = {
      model: "gpt-3.5-turbo",
      messages: [systemMessage, ...apiMessages],
    };

    await fetch("https://api.openai.com/v1/chat/completions", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${API_KEY}`,
      },
      body: JSON.stringify(apiRequestBody),
    })
      .then((response) => response.json()) // Correct JSON parsing
      .then((data) => {
        const replyMessage = {
          message: data.choices[0].message.content,
          sender: "ChatGPT",
          direction: "incoming",
          sentTime: "just now",
        };
        setMessages((prevMessages) => [...prevMessages, replyMessage]);
        setIsTyping(false); // Stop typing indicator
      });
  }

  return (
    <div className="App">
      <div style={{ position: "relative", height: "800px", width: "700px" }}>
        <MainContainer>
          <ChatContainer>
            <MessageList
              scrollBehavior="smooth"
              typingIndicator={
                isTyping ? (
                  <TypingIndicator content="ChatGPT is typing..." />
                ) : null
              }
            >
              {messages.map((message, i) => (
                <Message
                  key={i}
                  model={{
                    message: message.message,
                    sentTime: message.sentTime,
                    sender: message.sender,
                  }}
                />
              ))}
            </MessageList>
            <MessageInput placeholder="Type message here" onSend={handleSend} />
          </ChatContainer>
        </MainContainer>
      </div>
    </div>
  );
}

export default Chatbot;

这是 app.js，我在其中调用上述组件。我最初打算将其放在 Studypage.js 中，但认为这可能存在一些层次结构问题。然而，这个设置也不起作用！

import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import React from "react";
import StudyPage from "./pages/StudyPage";
import Chatbot from "./components/Chatbot";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<StudyPage />} />
        <Route path="/chat" element={<Chatbot />} />
      </Routes>
    </Router>
  );
}

export default App;

这是我的 package.json 文件：

{
  "dependencies": {
    "@chatscope/chat-ui-kit-react": "^2.0.3",
    "@chatscope/chat-ui-kit-styles": "^1.4.0",
    "@fullcalendar/daygrid": "^6.1.15",
    "@fullcalendar/google-calendar": "^6.1.15",
    "@fullcalendar/react": "^6.1.15",
    "@fullcalendar/timegrid": "^6.1.15",
    "axios": "^1.7.7",
    "check-peer-dependencies": "^4.3.0",
    "react-hook-form": "^7.53.0",
    "react-router-dom": "^6.26.1"
  }
}

如果有人能提供帮助，我将不胜感激！

Answer 1

如果您可以发布错误跟踪，它显示哪一行等等，这可能会有所帮助。

我认为您可能需要将消息包装到 div 中。试试这个：

<MessageList>
<div>{messages.map((message, i) => (
                <Message
                  key={i}
                  model={{
                    message: message.message,
                    sentTime: message.sentTime,
                    sender: message.sender,
                  }}
                />
              ))}</div>
</MessageList>