javascript - 对象属性未显示在服务器上

问题描述

我正在关注MERN 堆栈上的本教程，因为我想看看所有部分如何编织在一起以更好地理解它。我的问题是，当我去加载在客户端输入（studentName和regNo）的服务器对象属性时，没有出现，除了那些具有默认值的属性。当我去时，http://localhost:5000/students/我看到以下内容：

在服务器端，我有以下内容：

/server/models/student.js包含

import mongoose from 'mongoose';

const studentSchema= mongoose.Schema({
    regNo: Number,
    studentName: String,
    grade:  {
        type: String, default: 'hello'
    },
    section: {
        type: String, default: 'Z'
    }

})

const student = mongoose.model('student', studentSchema);
export default student;

/server/controllers/student.js包含：

import StudentData from '../models/student.js';

export const getStudents = async (req, res)=>{
    try {
        console.log("This try statement worked")
        const allStudents= await StudentData.find(); //Goes to model and finds student data if available
        res.status(200).json(allStudents);
    } catch (error) {
        res.status(404).json({message: error.message});
        
    }
};

export const createStudent= async (req, res) =>{
    const student= req.body;

    const newStudent= new StudentData(student); //model(variable)

    try {
        await newStudent.save();
        res.status(201).json(newStudent);
    } catch (error) {
        res.status(409).json({message: error.message})
        
    }
}

/server/routes/students.js包含

import express from "express";
import { getStudents, createStudent} from "../controllers/student.js"
import student from '../models/student.js';
const router = express.Router();
router.get("/", getStudents); //res = response req=request
router.post("/", createStudent); 
export default router;

在客户端我有/client/components/createStudent/createStudent.js：

import React, {useState} from 'react';
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import axios from 'axios';

const useStyles = makeStyles((theme) => ({
  root: {
    '& > *': {
      margin: theme.spacing(1),
      width: '25ch',
    },
  },
}));



export default function Create() {
  const classes = useStyles();
  const [student, setStudent]= useState({
    regNo: 0,
    studentName: '',
    grade: '',
    section: ''
  }); //React hook. Updates data in text fields on frontend
  const createStudent = () => {
  axios.post("http://localhost:5000/students", student)


} 
  return (
    <>
    <h2>Create Student</h2>
    <form className={classes.root} noValidate autoComplete="off">
      <TextField id="outlined-basic" label="Registration No." variant="outlined" value={student.regNo} onChange={(event) =>{
        setStudent({...student, regNo: event.target.value})
      }}  />
      <TextField id="outlined-basic" label="Name" variant="outlined" value={student.studentName} onChange={(event) =>{
        setStudent({...student, studentName: event.target.value})
      }} /><TextField id="outlined-basic" label="Grade" variant="outlined" value={student.grade} onChange={(event) =>{
        setStudent({...student, grade: event.target.value})
      }} /><TextField id="outlined-basic" label="Section" variant="outlined" value={student.section} onChange={(event) =>{
        setStudent({...student, section: event.target.value})
      }} />
      <Button variant="contained" color="primary" onClick={createStudent}  >
        Create 
      </Button>
    </form>
    </>
  );
}

早些时候，我在 Chrome 控制台中收到以下错误：

但是我通过按照本文中的建议添加这个 Chrome 扩展来修复它（或者我认为是这样）。这可能是我的属性没有显示的原因吗？

标签： javascriptnode.jsreactjsmongodbexpress

javascript - 对象属性未显示在服务器上

问题描述

解决方案

推荐阅读