使用MongoDB时无法存入团队名称的前端UI问题排查

我正在使用React.js和MongoDB进行Web开发，目标是创建一个团队UI，将团队名称存储到团队数据库中。项目分为客户端（UI设计）和服务端（数据库Schema及后端连接）两部分。提交表单后，MongoDB中仅生成自动ID，未存储团队名称，求排查问题。

相关代码 #

团队Schema文件（TeamName.js） #

const mongoose = require("mongoose");

const TeamSchema = new mongoose.Schema({
    team_name: String
    
});

const Team = mongoose.model("Team", TeamSchema);

module.exports = Team;

服务端index.js连接代码 #

const Team = require('./schema/TeamName.js'); const cors = require('cors')
const mongoose = require('mongoose');
const mongoString ="connection string"
mongoose.connect(mongoString)
const database = mongoose.connection
database.on('error', (error) => console.log(error))
database.once('connected', () => console.log('Database Connected'))
const express = require('express');
const app = express();

app.use(express.json());
app.use(cors()) app.post('/createTeam', async (req, res) => {
    try {
        const team = new Team(req.body);
        console.log(team);
        await team.save();
        res.send(team);
    } catch (error) {
        res.status(500).send(error);
    }
})  app.get('/getTeam', async (req, res) =>{
    const team = await Team.find()
    res.json(team);
})

前端Team页面代码 #

import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import axios from 'axios';

export default function Team({ setActive }) {
  const [teamValues, setTeamValues] = useState({
    team_name: '',
  });

  const handleChange = (event) => {
    setTeamValues({ ...teamValues, [event.target.name]: event.target.value });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // Post teamValues data to your server endpoint
    axios.post('http://localhost:9000/createTeam', teamValues)
      .then((res) => {
        // Handle successful team creation, e.g., redirect to team list page
        setActive('Login');
      })
      .catch((err) => {
        alert('Error in creating the team');
      });



return (
<div className="container mt-5">
  <div className="row justify-content-center">
    <div className="col-md-6 col-lg-4">
      <div className="card">
        <div className="card-body">
            <div className="card">
        <div className="card-body">
          <h2 className="card-title">Create a New Team</h2>
          <form onSubmit={handleSubmit}>
            <div className="form-group">
              <label>Team Name:</label>
              <input
                type="text"
                className="form-control"
                name="team_name"
                value={teamValues.team_name}
                onChange={handleChange}
              />
            </div>

            <button type="submit" className="btn btn-primary btn-block">
              Create Team
            </button>
          </form>
        </div>
      </div>
       );
      }

表单截图 #

1. 修复前端语法错误 #

你的handleSubmit函数未正确闭合，在axios请求后直接编写return语句，导致组件逻辑混乱，事件绑定和状态更新异常。需给handleSubmit添加闭合大括号：

const handleSubmit = (event) => {
  event.preventDefault();
  axios.post('http://localhost:9000/createTeam', teamValues)
    .then((res) => {
      setActive('Login');
    })
    .catch((err) => {
      alert('Error in creating the team');
    });
}; // 补全这行闭合大括号

return (
// ... 组件渲染代码
);

2. 验证请求数据是否正确传递 #

在服务端/createTeam接口中添加日志，确认是否收到team_name字段：

app.post('/createTeam', async (req, res) => {
    try {
        console.log('Received request body:', req.body); // 新增日志
        const team = new Team(req.body);
        console.log(team);
        await team.save();
        res.send(team);
    } catch (error) {
        res.status(500).send(error);
    }
})

• 若日志显示req.body为空或无team_name，说明前端状态更新或请求发送有问题；
• 若req.body包含team_name，则Schema和保存逻辑无问题（当前Schema配置正确）。

3. 检查React状态更新是否正常 #

在handleChange函数中添加日志，确认输入内容时状态是否正确更新：

const handleChange = (event) => {
  const newTeamValues = { ...teamValues, [event.target.name]: event.target.value };
  console.log('Updated team values:', newTeamValues); // 新增日志
  setTeamValues(newTeamValues);
};

输入团队名称时，控制台应打印包含对应team_name的对象，若未打印则说明输入框的onChange绑定异常。

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