构造 Ajax 调用 Redux-Form 动作以 Mongo 表达

Question

我对 JS 和 React 比较陌生，我正在使用 Redux-Form 将一个简单的项目添加到我的 mongo 数据库中。我配置了表单并且 API 是用数据库连接定义的，但我不认为我在操作中正确地构建我的代码，以便它以可以解释的方式发送数据。

具体来说，我在按下提交后看到了表单数据，但出现了 500 错误。有人能给我指明 shaping 我的 ajax 请求的方向，以便它接收数据库 post 的可用数据吗？

新项目形式：

import React, { Component } from 'react'; import { fetchItems } from '../actions/index'; import {reduxForm} from 'redux-form'; import { createItem } from '../actions/index';


class NewItem extends Component {

        render () {


            const { fields: {name, category, description, image}, handleSubmit } = this.props;


            return (
            <form onSubmit={handleSubmit(this.props.createItem)}>
                <h3>Add an Item</h3>
                <div className="form-group">
                    <label>Item Name</label>
                    <input type="text" className="form-control" {...name} />
                </div>
                <div className="form-group">
                    <label>Category</label>
                    <input type="text" className="form-control" {...category} />
                </div>
                <div className="form-group">
                    <label>Description</label>
                    <textarea className="form-control" {...description} />
                </div>
                <div className="form-group">
                    <label>Image URL</label>
                    <input type="text" className="form-control" {...image} />
                </div>
                <button type="submit" className="btn btn-primary">Submit</button>
            </form>
            )
        }

}

export default reduxForm({
    form: 'NewItemForm',
    fields: ['name', 'category', 'description', 'image'] }, null, {createItem})(NewItem);

行动

export const FETCH_MY_ITEMS = 'FETCH_MY_ITEMS';
export const FETCH_SEARCH_ITEMS = 'FETCH_SEARCH_ITEMS';
export const CREATE_ITEM = 'CREATE_ITEM';
export const FETCH_ITEM = 'FETCH_ITEM';
export const DELETE_ITEM = 'DELETE_ITEM';

export function createItem (props) {

     const request = $.post('/newItem', props).then(function (result){
    return {
        result
    }
});

    return {
        type: CREATE_ITEM,
        payload: request
    };
}

表达index.js

app.post("/newItem", function(req, res) {
        var newItem = require('./server/api/new-item')(dbConnection);
        newItem(req, res);
    });

api newItem

端点

var assert = require('assert');

//add new item to 
module.exports = function (dbConnection) {
    return function (req, res) {

        var newItem = req.body.newItem;
        newItem.user = req.session.userId;
        newItem.createDate = new Date;
        dbConnection.collection('items').insertOne(newItem, function (err, result) {
            if (err) {
                res.send("error: something bad happened and your item was not saved")
            }
            res.send("success-item-posted");
            res.end();

        })
    }
};

终端错误：TypeError：无法设置未定义的属性 'user' 在 /Users/mary/working-files/closet-redux/server/api/new-item.js:13:22 在 /Users/mary/working-files/closet-redux/index.js:184:13 在 Layer.handle [作为 handle_request] (/Users/mary/working-files/closet-redux/node_modules/express/lib/router/layer.js:95:5) 接下来 (/Users/mary/working-files/closet-redux/node_modules/express/lib/router/route.js:131:13) 在 Route.dispatch (/Users/mary/working-files/closet-redux/node_modules/express/lib/router/route.js:112:3) 在 Layer.handle [作为 handle_request] (/Users/mary/working-files/closet-redux/node_modules/express/lib/router/layer.js:95:5) 在 /Users/mary/working-files/closet-redux/node_modules/express/lib/router/index.js:277:22 在 Function.process_params (/Users/mary/working-files/closet-redux/node_modules/express/lib/router/index.js:330:12) 接下来 (/Users/mary/working-files/closet-redux/node_modules/express/lib/router/index.js:271:10) 在立即。 (/Users/mary/working-files/closet-redux/node_modules/express-session/index.js:432:7)

Answer 1

感谢@bdougie，我从服务器仔细查看了我的控制台日志，发现了 2 个问题：

1) 表单正在发送对象，而不是命名对象所以只需要为我的 newItem 变量使用 req.body

2) 会话中的 userId 在添加到 newItem 时出错 - 老实说，我只是将它移到创建日期以下并使用 console.log 进行了测试，它现在可以工作了。

构造 Ajax 调用 Redux-Form 动作以 Mongo 表达

Structuring Ajax call for Redux-Form action to express with Mongo

ajax

mongodb

express

react-redux

redux-form