【发布时间】：2019-10-21 10:21:24
【问题描述】：
我正在尝试在axios 的帮助下将subjects 中的array 与其他数据一起传递给MongoDB。
问题是 (axios) 没有将 subject array 保存到 MongoDB
这是我的AddCourse.jx
import React, {Component} from 'react';
import axio from 'axios';
export default class AddCourse extends Component{
constructor(props){
super(props);
this.state = {
colorChange: true,
coloChangeTwo: true,
courseName: '',
courseCode: '',
passMarks: '',
lectureInCharge: '',
subjects: []
};
}
onClick(){
this.setState({
colorChange: !this.state.colorChange
});
if(this.state.colorChange){
this.state.subjects.push('1');
}else{
var search_term = '1';
for(var i = this.state.subjects.length-1; i>=0; i--){
if(this.state.subjects[i] === search_term){
this.state.subjects.splice(i, 1);
break;
}
}
}
}
onClick2(){
this.setState({
coloChangeTwo: !this.state.coloChangeTwo
});
if(this.state.coloChangeTwo){
this.state.subjects.push('2');
}else{
var search_term = '2';
for(var i = this.state.subjects.length-1; i>=0; i--){
if(this.state.subjects[i] === search_term){
this.state.subjects.splice(i, 1);
break;
}
}
}
}
onSubmit(e){
e.preventDefault();
//new course object
const newCourse = {
courseName: this.state.courseName,
courseCode: this.state.courseCode,
passMarks: this.state.passMarks,
lectureInCharge: this.state.lectureInCharge,
subjects: this.state.subjects
};
// console.log(this.state.subjects);
// console.log(newCourse);
axio.post('http://localhost:4000/course/add', newCourse)
.then((res) => {
console.log('Course ' + res + ' Added!');
}).catch((err) => {
console.log(err);
});
this.setState({
colorChange: true,
coloChangeTwo: true,
courseName: '',
courseCode: '',
passMarks: '',
lectureInCharge: '',
subjects: []
});
}
onChangeCourseName(e){
this.setState({
courseName: e.target.value
});
}
onChangeCourseCode(e){
this.setState({
courseCode: e.target.value
});
}
onChangePassMarks(e){
this.setState({
passMarks: e.target.value
});
}
onChangeLectureInCharge(e){
this.setState({
lectureInCharge: e.target.value
});
}
render() {
let beforeClickingButton = 'btn btn-warning';
let afterClickingButton = 'btn btn-secondary';
let subjectButtonClass1 = this.state.colorChange ? beforeClickingButton : afterClickingButton;
let subjectButtonClass2 = this.state.coloChangeTwo ? beforeClickingButton : afterClickingButton;
return(
<div>
<h1>Add Course</h1>
<br />
<form onSubmit={this.onSubmit.bind(this)}>
<div className="container">
<div className="form-group">
<label>Course Name:</label>
<input
value={this.state.courseName}
onChange={this.onChangeCourseName.bind(this)}
type="text" className="form-control" placeholder="Course Name" />
</div>
<div className="form-group">
<label>Course Code:</label>
<input
value={this.state.courseCode}
onChange={this.onChangeCourseCode.bind(this)}
type="text" className="form-control" placeholder="Course Code" />
</div>
<div className="form-group">
<label>Pass Mark</label>
<input
value={this.state.passMarks}
onChange={this.onChangePassMarks.bind(this)}
type="text" className="form-control" placeholder="Pass Mark"/>
</div>
<div className="form-group">
<label>Lecture In Charge:</label>
<input
value={this.state.lectureInCharge}
onChange={this.onChangeLectureInCharge.bind(this)}
type="text" className="form-control" placeholder="Lecture in Charge"/>
</div>
<div className="form-group">
<label>Subjects: Select Subjects from below... (Green = Not Selected/Grey = Selected)</label>
<div className="container">
<div className="row text-center">
<div className="col-6">
<button
onClick={this.onClick.bind(this)}
className={subjectButtonClass1}
type="button" >Computer Architecture</button>
</div>
<div className="col-6">
<button
onClick={this.onClick2.bind(this)}
className={subjectButtonClass2}
type="button">Computer Networking</button>
</div>
</div>
</div>
</div>
<div className="form-group">
<button type="submit" className="btn btn-success btn-lg">Save Course</button>
</div>
</div>
</form>
</div>
);
}
}
这是我在节点环境中的server.js
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const mongoose = require('mongoose');
const CourseDB = require('./course-dbmodel');
const PORT = 4000;
const app = express();
const router = express.Router();
app.use(bodyParser.json());
app.use(cors());
app.use('/course', router);
mongoose.connect('mongodb://127.0.0.1:27017/course', {useNewUrlParser: true});
const connection = mongoose.connection;
connection.once('open', () => {
console.log('MongoDB connected through the port 27017');
});
app.listen(PORT, () => {
console.log('Listening to port 4000');
});
//add course
//http://localhost:4000/course/add
router.route('/add').post((req, res) => {
let courseDb = new CourseDB(req.body);
courseDb.save().then(course => {
res.status(200).send('Added!');
}).catch(err => {
console.log(err);
});
});
//get all courses
router.route('/all').get((req, res) => {
CourseDB.find((err, course) => {
if(err) throw err;
res.status(200).send(course);
});
});
//get books by course name
router.route('/:courseName').get((req, res) => {
let courseName = req.params.courseName;
CourseDB.find({subject: {$regex: `${courseName}`}},(err, subjects) => {
if(err) throw err;
res.status(200).send(subjects);
})
});
这是mongoose database schema，我用来将值存储到MongoDB
const mongoose= require('mongoose');
const Schema = mongoose.Schema;
let CourseDb = new Schema({
courseName: {type: String},
courseCode: {type: String},
passMarks: {type: Number},
lectureInCharge: {type: String},
subject: [{type: String}]
});
module.exports = mongoose.model('CourseDb', CourseDb, 'CourseDb');
谁能告诉我我做错了什么？
我在数据库中的数据的屏幕截图
这是当我consolo.log()newCourse 对象时
【问题讨论】：
-
您能否尝试在
/add路由上以及在 axios 帖子之前放置console.log以检查subject值。 -
是的，会上传截图
-
完成！检查我的更新答案@niccord
-
好的，服务器日志呢？
-
将
subject更改为subjects看起来你在服务器端忘记了s。
标签： javascript node.js reactjs mongodb mongoose