0

私は比較的JSと反応が新しく、Redux-Formを使用して単純なアイテムをmongo dbに追加しています。私はフォームを構成し、API は db 接続で定義されていますが、解釈できる方法でデータを送信するようにアクションでコードを正しく構成しているとは思いません。

具体的には、送信を押した後にフォーム データが表示されていますが、500 エラーが発生しています。誰かが私のajaxリクエストを適切に形成する方向に私を向けることができますか?

ここに画像の説明を入力

新しいアイテムのフォーム:

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);
    });

newItem の API エンドポイント

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();

        })
    }
};

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)

4

1 に答える 1

0

@bdougie のおかげで、サーバーのコンソール ログを注意深く調べたところ、2 つの問題が見つかりました。

1）フォームは名前付きオブジェクトではなくオブジェクトを送信していたため、 newItem 変数に req.body を使用する必要がありました

2) newItem に追加されたときに、セッションからの userId がエラーを出していました。

于 2016-06-01T20:08:22.783 に答える