React+Express项目中ChatGPT响应数据无法在前端显示问题求助

核心问题：字段拼写错误 #

后端返回的JSON里，键名写成了messaage（多了一个字母a），但前端代码里是用data.message去读取的，字段不匹配导致前端拿不到有效数据，所以页面上的{response}始终是空的。

具体修复步骤 #

1. 修正后端的字段拼写 #

打开后端index.js，找到返回响应的代码，把拼写错误的messaage改成message：

// 原错误代码
res.json({
    messaage: response.data.choices[0].text
});

// 修正后代码
res.json({
    message: response.data.choices[0].text
});

2. 可选优化：处理空响应场景 #

如果担心ChatGPT返回空内容，前端可以添加默认提示：

// 修改App.js里的响应展示部分
<div>{response || "暂无响应内容"}</div>

3. 简化后端中间件（可选） #

后端同时使用了express.json()和bodyParser.json()，二者功能重复，保留一个即可，推荐保留express.json()并删除bodyParser.json()那行：

app.use(express.json())
// app.use(bodyParser.json()) // 删掉这一行
app.use(cors());

修改完成后重启后端服务，再次提交输入，页面就能正常显示ChatGPT的响应内容了。

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