Next.js与MongoDB集成：解决表单数据提交为Undefined的问题

// NewPlayerPage.js (部分代码)
const newPlayerPage = (props) => {
    const handleAddPlayer = async (enteredPlayerData) => {
        // ... API 调用逻辑
    };

    return (
        <Fragment>
            {/* ... 其他内容 */}
            <NewPlayer teamId={router.query.teamId} onAddPlayer={handleAddPlayer} />
        </Fragment>
    );
};

// NewPlayer.js (部分代码)
const newPlayer = (props) => {
    // ... useRefs, teamId
    const handleSubmit = (event) => {
        event.preventDefault();
        // ... 获取表单数据
        const playerData = {
            teamId: teamId,
            playerName: {
                playerFName: enteredPlayerFName,
                playerLName: enteredPlayerLName,
            },
        };
        props.onAddPlayer(playerData); // 这里将playerData作为参数传递
    };

    return (
        <form onSubmit={handleSubmit}>
            {/* ... 表单元素 */}
        </form>
    );
};

// NewPlayerPage.js
import { Fragment } from 'react';
import { useRouter } from 'next/router';
import NewPlayer from '../components/NewPlayer'; // 假设NewPlayer在components目录下

const NewPlayerPage = () => { // 修改为NewPlayerPage以符合组件命名规范
    const router = useRouter();

    const handleAddPlayer = async (enteredPlayerData) => {
        console.log('Received data in handleAddPlayer:', enteredPlayerData); // 调试输出

        try {
            const response = await fetch('/api/new-player', {
                method: 'POST',
                body: JSON.stringify(enteredPlayerData),
                headers: { 'Content-Type': 'application/json' },
            });

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const data = await response.json(); // 注意：response.json()也是异步的，需要await
            console.log('API response:', data);

            router.replace('/teams/' + router.query.teamId);
            alert('Player ' + enteredPlayerData.playerName.playerFName + ' created!');
        } catch (error) {
            console.error('Error adding player:', error);
            alert('Failed to create player: ' + error.message);
        }
    };

    return (
        <Fragment>
            <h2>New player page</h2>
            <h3>TeamID: {router.query.teamId}</h3>
            {/* 关键修改在这里：使用箭头函数包装handleAddPlayer */}
            <NewPlayer teamId={router.query.teamId} onAddPlayer={(params) => handleAddPlayer(params)} />
        </Fragment>
    );
};

export default NewPlayerPage;

// components/NewPlayer.js
import { useRef } from 'react';
import classes from './NewPlayer.module.css'; // 假设有CSS模块

const NewPlayer = (props) => {
    const playerFNameInput = useRef();
    const playerLNameInput = useRef();
    const teamId = props.teamId;

    const handleSubmit = (event) => {
        event.preventDefault();

        const enteredPlayerFName = playerFNameInput.current.value;
        const enteredPlayerLName = playerLNameInput.current.value;

        const playerData = {
            teamId: teamId,
            playerName: {
                playerFName: enteredPlayerFName,
                playerLName: enteredPlayerLName,
            },
        };
        props.onAddPlayer(playerData); // 这里将playerData作为参数传递给父组件的回调
    };

    return (
        <form onSubmit={handleSubmit}>
            <h3>Team: {props.teamName}</h3>
            <div className={classes.control}>
                <label htmlFor='playerFName'>Player First Name</label>
                <input type='text' required id='playerFName' ref={playerFNameInput} />
            </div>
            <div className={classes.control}>
                <label htmlFor='playerLName'>Player Last Name</label>
                <input type='text' required id='playerLName' ref={playerLNameInput} />
            </div>
            <h3>TeamId: {props.teamId}</h3>
            <div className={classes.actions}>
                <button>Create Player</button>
            </div>
        </form>
    );
};

export default NewPlayer;

// pages/api/new-player.js
import { MongoClient } from 'mongodb'; // 假设您已安装mongodb驱动

async function handler(req, res) {
    if (req.method === 'POST') {
        const data = req.body; // 这里就是从前端接收到的playerData

        // 验证数据（可选但推荐）
        if (!data || !data.teamId || !data.playerName || !data.playerName.playerFName) {
            return res.status(400).json({ message: 'Invalid data provided.' });
        }

        let client;
        try {
            // 替换为您的MongoDB连接字符串
            const connectionString = `mongodb+srv://<username>:<password>@<cluster>.mongodb.net/<database>?retryWrites=true&w=majority`;
            client = await MongoClient.connect(connectionString);
            const db = client.db();

            const playersCollection = db.collection('players'); // 假设您的集合名为'players'
            const result = await playersCollection.insertOne(data);

            console.log('Inserted document ID:', result.insertedId);

            res.status(201).json({ message: 'Player created successfully!', id: result.insertedId });
        } catch (error) {
            console.error('MongoDB operation error:', error);
            res.status(500).json({ message: 'Failed to create player.', error: error.message });
        } finally {
            if (client) {
                await client.close();
            }
        }
    } else {
        res.status(405).json({ message: 'Method Not Allowed' });
    }
}

export default handler;