NextJS表单提交数据至MongoDB时出现undefined问题求助

1. 输入框Ref绑定语法错误 #

在NewPlayer组件的第一个input标签里，ref属性写法存在语法错误：

<input type='text' required id='playerFName' ref {playerFNameInput} />

此处缺少等号，导致ref未正确绑定到DOM元素，后续获取playerFNameInput.current.value时会返回undefined。

修复后代码：

<input type='text' required id='playerFName' ref={playerFNameInput} />

2. Alert中的属性路径错误 #

在NewPlayerPage的handleAddPlayer函数里，alert语句的属性访问路径错误：

alert('Player ' + enteredPlayerData.playerFName + ' created!');

playerFName嵌套在playerName对象内部，正确路径应为enteredPlayerData.playerName.playerFName，否则alert中会显示undefined。

修复后代码：

alert('Player ' + enteredPlayerData.playerName.playerFName + ' created!');

3. 异步操作遗漏await #

response.json()是异步方法，需要添加await才能正确获取解析后的数据，否则data会是一个Promise对象而非实际返回值：

const data = await response.json();

4. 额外检查：API路由的请求体解析 #

若前端修复后仍存在问题，需确认/api/new-player路由是否正确解析JSON请求体。Next.js默认会自动解析JSON请求体，以下是标准API路由示例供参考：

import { MongoClient } from 'mongodb';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const playerData = req.body;
    // 打印数据确认是否正常接收
    console.log(playerData);

    const client = await MongoClient.connect('你的MongoDB连接字符串');
    const db = client.db();
    const playersCollection = db.collection('players');
    await playersCollection.insertOne(playerData);
    client.close();

    res.status(201).json({ message: 'Player added!' });
  }
}

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