Я не уверен, что я делаю здесь неправильно, но я ничего не получаю от req.body или req.body.name. Я просто пытаюсь получить текст из поля ввода в компоненте React. Вот мой POST запрос:
//posting notes to backend and storing in db
module.exports = (app,bodyparser,mongoUrl) => {
let MongoDB = require('mongodb').MongoClient;
app.use(bodyparser.urlencoded({extended: false}));
app.use(bodyparser.json());
app.post('/notes',function(req,res){
//posting the note just fine, just not receiving the note text (says undefined)
//not getting note text for some reason?? only returning the date...
//send response to append note to page
//store note data in db
let noteData = {
text: req.body.name,
date: new Date().toDateString()
};
console.log(req.body);
MongoDB.connect(mongoUrl,function(err,db){
let notesCollection = db.collection('notes');
notesCollection.insert(noteData);
db.close();
});
res.status(201).send(noteData);
});
}
И мой реактивный компонент:
class NewNote extends Component {
//this is for creating a new note only
//need post request for this one
//need to clear textarea upon submit or cancel
render(){
return (
<div id="form-container" className='container-fluid' style={defaultStyle}>
<div id="form">
<div className="form-group">
<form action="/notes" method="POST" encType="multipart/form-data">
<label htmlFor="newNote">New Note:</label>
<input type="text" name="name" className="form-control" rows="5" id="newNote" placeholder="Write your note here..."></input>
<button id="done" type="submit" className="btn btn-primary pull-right">Done</button>
<button id="cancel" className="btn btn-warning pull-right">Cancel</button>
</form>
</div>
</div>
</div>
)
}
}
И мой package.json файл:
{
"name": "quick-notes-app",
"version": "1.0.0",
"description": "my first full-stack javascript app",
"main": "./routes/server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon --exec babel-node ./routes/server.js --ignore public/",
"dev": "webpack -wd",
"lint": "eslint ./"
},
"repository": {
"type": "git",
"url": "git+https://github.com/CandiW/quick-notes-app.git"
},
"author": "CandiW",
"license": "ISC",
"bugs": {
"url": "https://github.com/CandiW/quick-notes-app/issues"
},
"homepage": "https://github.com/CandiW/quick-notes-app#readme",
"dependencies": {
"body-parser": "^1.18.2",
"express": "^4.16.3",
"mongodb": "^2.2.35",
"randomcolor": "^0.5.3",
"react": "^16.3.2",
"react-dom": "^16.3.2"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"eslint": "^4.19.1",
"eslint-plugin-react": "^7.7.0",
"nodemon": "^1.17.3",
"webpack": "^3.11.0"
}
}
Это мой server.js файл, где мне понадобился модуль body-parser:
const express = require('express');
const path = require('path');
const bodyparser = require('body-parser');
const notes = require('./notes.js');
const myNotes = require('./mynotes.js');
const mongodb = require('mongodb');
const MongoClient = mongodb.MongoClient;
let app = express();
let database = "mongodb://localhost:3000/";
app.use(express.static('public'));
app.use(bodyparser.urlencoded({extended: true}));
app.use(bodyparser.json());
function quickNotesApp(port){
// eslint-disable-next-line no-console
console.log("listening on port " + port);
notes(app,bodyparser,database);
myNotes(app,bodyparser,database);
app.listen(port);
}
quickNotesApp(3000);
Пожалуйста, извините за мои комментарии в коде :) Я использую их для отслеживания моих дел и того, что делает каждый компонент. Вы все можете увидеть мое github репо для моего приложения здесь: Quick-Notes-App
Обновление 05.02.2008:
Я внес некоторые изменения в то, как я использую body-parser и как я использую его в своем запросе POST (я обновил оригинальные примеры кода, которые я прикрепил). На этом этапе я все еще получаю тот же text: null, когда я возвращаю массив документов из моей базы данных, а когда console.log req.body это все еще пустой объект. Хотите знать, есть ли у кого-нибудь мысли о том, является ли React.js проблемой? Например, мы должны использовать className вместо class в наших компонентах React. Я не нахожу ничего готового ответить на этот вопрос. Я также удалил и переустановил express, body-parser и все остальные мои зависимости безрезультатно.
Обновление 2 - 5/2/2018
Для тех, кто может найти это полезным, я нашел эту статью Medium о том, как объединить внутренний интерфейс Node.js с внешним интерфейсом React.js. Я думаю, что попробую это и посмотрю, поможет ли это.