React集成OpenAI API时出现Cannot read properties of undefined错误

调用sendMsgToOpenAI函数时触发以下错误：

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'choices')
    at sendMsgToOpenAI (openai.js:15:1)
    at async handleSend

相关代码 #

App组件（App.js） #

import './App.css';
import AIlogo from './assets/chatgpt.svg';
import addBtn from './assets/add-30.png';
import msgIcon from './assets/message.svg';
import home from './assets/home.svg';
import saved from './assets/bookmark.svg';
import upgrade from './assets/rocket.svg';
import sendBtn from './assets/send.svg';
import userIcon from './assets/user.svg';
import AIchat from './assets/chatgptLogo.svg';
import { sendMsgToOpenAI } from './openai';
import { useState } from 'react';

function App() {

  const[input, setInput] = useState("");

const handleSend = async() => {

  const res = await sendMsgToOpenAI(input);
  console.log(res);
}

  return (
    <div className="App">
      <div className ="sideBar">
     <div className ="upperSide">
     
     <div className ="upperSideTop"><img src={AIlogo} alt="Logo" className="logo"/><span className="brand">Eclipse AI</span>  
     <button className="midBtn"><img src={addBtn} alt="" className="addBtn" />New Chat</button>
      
     <div className="upprtSideBottom">
      
    <button className="query"><img src={msgIcon} alt=""/> What is Programming ?</button>
    <button className="query"><img src={msgIcon} alt=""/> How to use an API ?</button>
    </div>
     </div>
     </div>


   
        
       <div className ="lowerSide">
       <div className ="listItems"><img src={home} alt="" className="listitemsImg" />Home</div>
       <div className ="listItems"><img src={saved} alt="" className="listitemsImg" />Saved</div>
       <div className ="listItems"><img src={upgrade} alt="" className="listitemsImg" />Upgrade to Pro</div>
       </div>
     </div>

     <div className ="main">
<div className="chats">

<div className="chat">
 <img src={AIchat} alt=""/><p className="txt">uncountable noun [usu with supp] You can use stuff to refer to things such as a substance, a collection of things, events, or ideas, or the contents of something in a general way without mentioning the thing itself by name.</p>
 <img src={userIcon} alt=""/><p className="txt">uncountable noun [usu with supp] You can use stuff to refer to things such as a substance, a collection of things, events, or ideas, or the contents of something in a general way without mentioning the thing itself by name.</p>
</div>
</div>
 



<div className="chatFooter">
  <div className="inp">
    <input type="text" placeholder='Message EclipseAI' value={input} onChange={(e)=>{setInput(e.target.value)}} /><button className="send" onClick={handleSend}><img src={sendBtn} alt="send-icon" /></button>

  </div>
  <p>This page of EclipseAI is still under development, including the user interface.</p>
</div>
     </div>
    </div>
  );
}

export default App;

OpenAI函数（openai.js） #

const OpenAI = require('openai');

const openai = new OpenAI({ apiKey: 'Key in here', dangerouslyAllowBrowser: true });

export async function sendMsgToOpenAI(message) {
    const res = await openai.completions.create({
        model: 'gpt-3.5-turbo-instruct',
        prompt: message,
        temperature: 0.7,
        max_tokens: 256,
        top_p: 1,
        frequency_penalty: 0,
        presence_penalty: 0
    });
    return res.data.choices[0].text;
}

解决方案 #

错误原因是OpenAI Node.js SDK v4的API响应直接返回包含choices的对象，无需通过.data层级访问。将openai.js中的返回语句修改为：

return res.choices[0].text;

内容的提问来源于stack exchange，提问作者Akin