react-native openai-api模块是否适配ChatGPT API？Expo报错求助

核心结论 #

你使用的openai-api模块未更新支持ChatGPT的ChatCompletion API，该包已停止维护，不包含ChatCompletion相关方法，这就是你触发TypeError: Cannot read property 'create' of undefined报错的原因。

解决方案 #

方案1：使用官方维护的openai包 #

弃用旧的openai-api，改用OpenAI官方推出的openai npm包，它完全支持ChatGPT API，且兼容React Native/Expo环境。

1. 安装官方包

npm install openai
# 或
yarn add openai

2. 修改代码适配官方包

import React, { useState, useEffect } from "react";
import { View, TextInput, Button, FlatList, Text, Alert } from "react-native";
import OpenAI from 'openai';

// 初始化客户端
const openai = new OpenAI({
  apiKey: "YOUR_API_KEY",
  dangerouslyAllowBrowser: true, // React Native环境需开启此配置，生产环境建议通过后端代理请求，避免密钥泄露
});

export default function App() {
  const [inputText, setInputText] = useState("");
  const [messages, setMessages] = useState([]);
  const [responseText, setResponseText] = useState("");

  useEffect(() => {
    async function generateResponse() {
      if (messages.length === 0) return;
      try {
        // 注意官方包的调用路径是openai.chat.completions.create
        const response = await openai.chat.completions.create({
          model: "gpt-3.5-turbo",
          messages: messages,
        });
        // 响应结构与旧包不同，需取message.content
        setResponseText(response.choices[0].message.content);
      } catch (error) {
        Alert.alert('请求失败', error.message);
        console.error(error);
      }
    }
    generateResponse();
  }, [messages]);

  // 新增发送消息逻辑
  const handleSend = () => {
    if (!inputText.trim()) return;
    setMessages(prev => [...prev, { role: "user", content: inputText }]);
    setInputText("");
  };

  return (
    <View style={{ flex: 1, padding: 20 }}>
      <FlatList
        data={[...messages, { role: "assistant", content: responseText }].filter(item => item.content)}
        renderItem={({ item }) => (
          <Text style={{ marginVertical: 8, padding: 10, backgroundColor: item.role === 'user' ? '#e0e0e0' : '#f5f5f5', borderRadius: 8 }}>
            {item.role === 'user' ? '你: ' : 'AI: '}{item.content}
          </Text>
        )}
        keyExtractor={(item, index) => index.toString()}
      />
      <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }}>
        <TextInput
          style={{ flex: 1, borderWidth: 1, borderColor: '#ccc', padding: 10, borderRadius: 8, marginRight: 10 }}
          value={inputText}
          onChangeText={setInputText}
          placeholder="输入你的问题..."
        />
        <Button title="发送" onPress={handleSend} />
      </View>
    </View>
  );
}

方案2：直接使用Fetch API调用（无第三方包依赖） #

如果不想引入第三方包，可直接通过Fetch请求OpenAI接口，兼容性更强：

import React, { useState, useEffect } from "react";
import { View, TextInput, Button, FlatList, Text, Alert } from "react-native";

const API_KEY = "YOUR_API_KEY";
const CHAT_API_URL = "https://api.openai.com/v1/chat/completions";

export default function App() {
  const [inputText, setInputText] = useState("");
  const [messages, setMessages] = useState([]);
  const [responseText, setResponseText] = useState("");

  useEffect(() => {
    async function generateResponse() {
      if (messages.length === 0) return;
      try {
        const response = await fetch(CHAT_API_URL, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "Authorization": `Bearer ${API_KEY}`
          },
          body: JSON.stringify({
            model: "gpt-3.5-turbo",
            messages: messages
          })
        });

        if (!response.ok) {
          const errorData = await response.json();
          throw new Error(errorData.error.message || '请求失败');
        }

        const data = await response.json();
        setResponseText(data.choices[0].message.content);
      } catch (error) {
        Alert.alert('请求失败', error.message);
        console.error(error);
      }
    }
    generateResponse();
  }, [messages]);

  const handleSend = () => {
    if (!inputText.trim()) return;
    setMessages(prev => [...prev, { role: "user", content: inputText }]);
    setInputText("");
  };

  return (
    <View style={{ flex: 1, padding: 20 }}>
      <FlatList
        data={[...messages, { role: "assistant", content: responseText }].filter(item => item.content)}
        renderItem={({ item }) => (
          <Text style={{ marginVertical: 8, padding: 10, backgroundColor: item.role === 'user' ? '#e0e0e0' : '#f5f5f5', borderRadius: 8 }}>
            {item.role === 'user' ? '你: ' : 'AI: '}{item.content}
          </Text>
        )}
        keyExtractor={(item, index) => index.toString()}
      />
      <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }}>
        <TextInput
          style={{ flex: 1, borderWidth: 1, borderColor: '#ccc', padding: 10, borderRadius: 8, marginRight: 10 }}
          value={inputText}
          onChangeText={setInputText}
          placeholder="输入你的问题..."
        />
        <Button title="发送" onPress={handleSend} />
      </View>
    </View>
  );
}

注意事项 #

• 密钥安全：生产环境请勿在客户端代码中直接暴露API密钥，建议搭建后端代理转发请求。
• 响应结构：ChatGPT API的响应结构与旧版Completion API不同，需注意取值路径为response.choices[0].message.content而非response.choices[0].text。

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