Question

我没有在服务器端获取用户输入值以使用React.js and Node.js在数据库中提交。我在下面提供我的代码。

Additem.js：

import React, { Component } from 'react';
import ItemService from './ItemService';

class AddItem extends Component {
    constructor(props){
        super(props);
        this.state = {value: ''};
        this.addItemService = new ItemService();
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange(event){
        this.setState({value: event.target.value});
    }
    handleSubmit(event){
        event.preventDefault();
        this.addItemService.sendData(this.state.value);
        this.props.history.push('/');
    }
    render() {
        return (
            <div className="container">
                <form onSubmit={this.handleSubmit}>
                    <label>
                        Add Item:
                        <input type="text" value={this.state.value} onChange={this.handleChange} className="form-control"/>
                        </label><br/>
                    <input type="submit" value="Submit" className="btn btn-primary"/>
                </form>
            </div>
        );
    }
}

export default AddItem;

itemService.js：

import axios from 'axios';

class ItemService {

  sendData(data) {
    axios.post('http://localhost:8888/add/post', {
    item: data
  })
  .then(function (response) {
      console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  }
}

export default ItemService;

此处来自react front end我将表单数据发送到下面给出的服务器。

路线/ route.js：

var task=require('../controller/controller.js');
module.exports = function(app) {
    app.get('/item',task.getUserData);
    app.post('/add/post',task.userDataSubmit);
    app.post('/edit/:id',task.userDataEdit);
    app.post('/update/:id',task.userDataUpdate);
    app.post('/delete/:id',task.userDataDelete);
}

控制器/ controller.js

var mongoJs=require('mongojs');
var dateTime = require('node-datetime');
var crypto = require("crypto");
var config=require('../config/config.js');
var database='mern-crud';
var collections=['books','items'];
var db=mongoJs(config.url+database, collections);
db.on('connect', function () {
    console.log('database connected')
});
exports.getUserData=function(req,res){
    db.items.find({},function(err,docs){
        if (!err) {
            if (docs) {
                res.json(docs);
            }
        }
    })
}
exports.userDataSubmit=function(req,res){
    console.log('req',req.body);
    var data={
        name:req.body.item
    }
    db.items.insert(data,function(err,docs){
        if (!err) {
            if (docs) {
                res.json('Item added successfully');
            }
        }else{
            res.json('unable to save to database');
        }
    })
}
exports.userDataEdit=function(req,res){

}
exports.userDataUpdate=function(req,res){

}
exports.userDataDelete=function(req,res){

}

我的问题是在提交表单数据后，这些数据未上传到数据库中，即使console.log('req',req.body);根本没有执行。这里我需要将表单数据存储到MongoDB中。

Answer 1

定义不在构造函数中但在componentDidMount中的初始值。然后使用componentWillRecieveProps和componentShouldUpdate来处理本地统计信息更新。

Answer 2

可能是 CORS 的问题最简单的方法是安装节点包 https://www.npmjs.com/package/cors

var cors = require('cors')

var app = express()
app.use(cors())

Answer 3

尝试使用

debugger;

当您使用以下命令运行应用程序时，请记住使控制台保持打开状态 debugger关键字，否则它将不会触发

在您的应用程序中添加断点并逐步控制执行并查看您是否将输入数据获取到需求与需要的输入数据一起到达服务器的位置。如果是，那可能是更严格的政策

使用此npm软件包

https://www.npmjs.com/package/cors

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

app.get('/products/:id', function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})

app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})

请记住将其添加到最上面的行中，如上所示。这就是为什么我只放置整个代码，以便您可以理解我们这样做的原因。这是添加到HTTP管道中的中间件，因此您必须清楚如何订购它们，而不要订购

无法使用React.js和Node.js在服务器端获取用户输入值

3 个答案: