使用redux-form

Question

我对redux-form完全陌生。我有一个带有Rails API后端的基本CRUD应用程序，我想做的是能够使用redux-form编辑字段。当我应用文档Redux-form-updatefields中提供的代码时，出现错误消息

  

找不到带有'id'= [object object] rails react.js的想法

但是，当我console.log值时，我得到了预期的对象

  

{标题：“测试编辑”，正文：“测试编辑正文”}

如果有人能帮助我，我将不胜感激，我尝试搜索具有相同错误的类似问题，但没有找到。

这是我的动作/index.js

import axios from 'axios';

export const FETCH_IDEAS = 'fetch_ideas'
export const CREATE_IDEA = 'create_idea'
export const FETCH_IDEA = 'fetch_idea'
export const DELETE_IDEA = 'delete_idea';
export const PATCH_IDEA = 'patch_idea'

const ROOT_URL = `http://0.0.0.0:3000/api/v1`;

export function fetchIdeas() {
    const request = axios.get(`${ROOT_URL}/ideas`);
    
    return {
        type: FETCH_IDEAS,
        payload: request
    }
}

export function createIdea(values, callback) {
    const request = axios.post(`${ROOT_URL}/ideas`, values)
    .then(() => callback());
    
    return {
        type: CREATE_IDEA,
        payload: request
    }
}

export function fetchIdea(id) {
    const request = axios.get(`${ROOT_URL}/ideas/${id}`);
    
    return {
        type: FETCH_IDEA,
        payload: request
    }
}

export function deleteIdea(id, callback) {
    const request = axios.delete(`${ROOT_URL}/ideas/${id}`)
    .then(() => callback());
    
    return {
        type: DELETE_IDEA,
        payload: id
    }
}

export function patchIdea(id, values, callback) {
    const request = axios.put(`${ROOT_URL}/ideas/${id}`, values)
    // console.log(request)
    .then(() => callback)
    
    return {
        type: PATCH_IDEA,
        payload: request
    }
}

这是我的components / ideas_edit.js

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form'  // similar to connect helper
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { patchIdea } from '../actions';
export const fields = ['title', 'body']



class IdeasEdit extends Component {
    componentDidMount() {
        const { id } = this.props.match.params;
        this.props.patchIdea(id);
    }

    renderField(field) {

        return (
            <div className="form-group">
                <label>{field.label}</label>
                <input
                    className="form-control"
                    type="text"
                    {...field.input}
                />
                {field.meta.touched ? field.meta.error : ''}
            </div>
        )
    }
    onSubmit(values) {
        console.log(values);
    //     // const { id } = this.props.match.params;

        this.props.patchIdea(values, () => {
            this.props.history.push('/')
        })
    }
    render() {
        const { handleSubmit } = this.props;
        // console.log(handleSubmit)

        return (
            <div>
                <h2>Edit form</h2>
                <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
                    <Field
                        label="Idea Title:"
                        name="title" //what piece of state the user want to create
                        component={this.renderField} //takes fun to display the component - help Field to 
                    // show himself on the screen
                    />
                    <Field
                        label="Idea Body:"
                        name="body"
                        component={this.renderField}
                    />
                    <button
                        type="submit"
                        className="btn btn-primary"
                    >
                        Edit
                    </button>
                    <Link to="/" className="btn btn-danger">Back to ideas list</Link>
                </form>
            </div>
        )
    }
}

function validate(values) {
    // console.log(values) -> {title: 'dfhajszhf', body: 'sjhlkjsdfh'}
    const errors = {}
    if (!values.title || values.title.length < 3) {
        errors.title = "Title can't be blank!";
    }
    if (!values.body) {
        errors.body = "Body can't be blank!"
    }
    return errors;
}


export default reduxForm({
    // some config options
    validate, // same as in ES6 validate: validate;
    form: 'IdeasEditForm', //as name of the form - this name should be unique
    fields
})(
    connect(null, { patchIdea })(IdeasEdit)
)

这是我的reducer / reducer_ideas.js

import _ from 'lodash';
import { FETCH_IDEAS, FETCH_IDEA } from '../actions'

export default function (state = {}, action) {
    switch (action.type) {
        case FETCH_IDEA:
            // const idea = action.payload.data;
            // const newState = { ...state }; //take all the existing ideas and put them in that obj
            // newState[idea.id] = idea;
            // return newState;
            return { ...state, [action.payload.data.id]: action.payload.data}
        case FETCH_IDEAS:
            return _.mapKeys(action.payload.data, 'id')

        default:
            return state;
    }
}