React集成OpenAI API报错：OpenAIAPI is not a constructor

开发者阿泽

2026-8-12

问题解决

核心错误原因

你使用的OpenAI Node.js SDK 3.1.0版本中，正确的API客户端类名是OpenAIApi（末尾为小写p），而非你代码中的OpenAIAPI（大写P），这直接导致了构造函数不存在的类型错误。

修正步骤

修正导入语句
将原导入中的OpenAIAPI改为OpenAIApi：

import { useEffect, useState } from "react"
import { Configuration, OpenAIApi } from "openai"

修正客户端实例化代码
在handleSubmit函数中，将OpenAIAPI替换为OpenAIApi：

const openai = new OpenAIApi(config)

修正API参数格式
size参数中的乘号是中文符号×，需要改为英文小写x，否则OpenAI API会返回参数无效错误：

size: "256x256",

修正后的完整handleSubmit代码

const config = new Configuration({
    apiKey: "API_KEY_IS_HERE",
})

const handleSubmit = async (e) => {
    e.preventDefault()
    setState('loading...')
    
    const openai = new OpenAIApi(config)
    try {
        const res = await openai.createImage({
            prompt: prompt,
            n: 1,
            size: "256x256",
        })
        const url = res.data.data[0].url
        console.log(url)
        console.log('clicked: ' + prompt)
        // 可添加加载完成后的状态更新，比如setState('')
    } catch (err) {
        console.error('请求失败:', err)
        setState('请求失败，请重试')
    }
}