NextJS 13中POST请求接收Body及OpenAI API响应渲染报错解决

错误原因 #

你遇到的错误是因为data.choices[0].message是一个包含role和content字段的对象，而React无法直接渲染对象类型的子元素，必须渲染字符串、数字等可直接显示的类型。

代码修正步骤 #

1. 修复API路由的拼写与语法错误 #

原代码中conosle.log('body' body)存在拼写错误（conosle→console）和语法错误（缺少逗号），修正后才能正常打印请求体。

2. 前端正确提取响应内容 #

在getMessages函数中，需要从OpenAI返回的message对象中提取content字段，而不是直接存储整个对象。

3. 在页面中渲染消息 #

在JSX中添加条件渲染，当message不为空时显示AI的回复内容。

修正后的完整代码 #

api/openai/route.jsx #

import { NextResponse } from "next/server"

export async function POST(request) {
  const body = await request.json()
  console.log('body', body) // 修复拼写和语法错误
  const options = {
    method: 'POST',
    headers: {
      "Authorization": `Bearer ${process.env.OPENAI_API_KEY}`,
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      model: "gpt-3.5-turbo",
      messages: [
        {
          role: 'user', content: body.message
        }
      ],
      max_tokens: 100,
    })
  }
  const response = await fetch('https://api.openai.com/v1/chat/completions', options)
  const data = await response.json()
  return NextResponse.json(data)
}

前端page.jsx #

'use client'

import { useState } from "react"

const Page = () => { // 组件名改为大写，符合React规范
  const [message, setMessage] = useState(null)
  const [value, setValue] = useState('')

  const getMessages = async () => { 
    const options = {
      method: 'POST',
      body: JSON.stringify({message: value}),
      headers: {
        "Content-Type": "application/json"
      }
    }
    
    const response = await fetch('/api/openai', options)
    const data = await response.json()
    // 提取content字段而非整个message对象
    setMessage(data.choices[0].message.content)
  }

  return (
    <div>
      <div>
        <input 
          type="text" 
          placeholder="输入你的问题" 
          value={value} 
          onChange={(e) => setValue(e.target.value)} 
        />
        <div onClick={getMessages} style={{cursor: 'pointer', marginTop: '8px', padding: '4px', backgroundColor: '#eee'}}>
          发送
        </div>
      </div>
      {/* 条件渲染AI回复 */}
      {message && (
        <div style={{marginTop: '16px', padding: '8px', border: '1px solid #ddd'}}>
          <strong>AI回复：</strong>
          {message}
        </div>
      )}
    </div>
  )
}

export default Page

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