[英]TypeError: Model is not a Constructor
使用Mongoose從Form Submit上的React組件上進行React組件進行MongoDB調用會引發錯誤-TypeError:組不是下面一行的構造函數
let group1 = new Group
我有一個服務器文件,在其中初始化連接。
server.js
const mongoose = require('mongoose');
mongoose.connect('dbName',{ useNewUrlParser: true });
mongoose.connection.once('open',() =>{
console.log('connected to the database');
});
然后有一個名為group.js的模型文件
const mongoose = require('mongoose');
var groupSchema = new mongoose.Schema({
groupName: String
});
module.exports = mongoose.model('Group',groupSchema);
組件CreateNew
const Group = require('../models/group');
class CreateNew extends Component {
// code here
render()
// code here
<Form onSubmit = {e => {
let group1 = new Group({
groupName: 'My Group'
});
group1.save(function(err,group1){
if (err) return console.log(err);
console.log('mongo success');
});
}}>
當我把所有的代碼在一個地方像這樣的server.js文件中,然后代碼工作,我可以在蒙戈看到的數據。
如果我只是將代碼從Form的onSubmit內部移到“ Class NewNewextended Component”行之前,僅用於測試,那么它將引發以下錯誤
編譯后無法覆蓋
Group
模型。
在這條線
module.exports = mongoose.model('Group',groupSchema);
我將向您簡要介紹該項目,其中包括前端和后端。
后端
1.1 server.js
const express = require('express'); const app = express(); const port = process.env.PORT || 80; const http = require('http').Server(app); const mongoose = require('mongoose'); const routes = require(path_to_api.js)(router); app.use('/myApi', routes) //***Here you should implement more details about your project such as routes, body parsers and other middlewares*****// mongoose.connect('mongodb://localhost:27017/your-app-name', err => err?console.log(err):console.log('Successfully connected to MongoDB')); http.listen(port, ()=> console.log(`Server running on ${port}`))
1.2模型,group.js
const mongoose = require('mongoose'); const Schema = mongoose.Schema; let groupSchema = new Schema({ groupName: { type: String } }); module.exports = mongoose.model('Group',groupSchema);
1.3 api.js(仍然是后端!!!)
const Group = require(path_to_group.js); module.exports = router => { router.post('/group', (req, res)=> { let group = new Group(); group.groupName = req.body.groupName; //Save in database group.save(function(err){ ... }) } return router }
前端
2.1 Ajax調用(service.js)
function group(data){ return fetch('/api/authenticate',{ method: 'POST', headers: { 'Accept': 'application/json', 'Content-type': 'application/json' }, body: JSON.stringify(data) }).then(response => response.json()).then(data => { return data //Server response }) } export {group}
2.2 React組件
import {group} from //service.js path class CreateNew extends Component { constructor(props, context){ this.sendGroupName = this.sendGroupName.bind(this); } this.sendGroupName(){ let data = //data received from form after submit //It is the most important part from the frontend - sending data to the server group(data).then(res => { //do somenthing with servers response } } render(){ <Form onSubmit={this.sendGroupName}> //Form content such as inputs, labels... <Form/> }
那是我對MEAN項目的快速解釋。 我希望對您有用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.