【问题标题】:Values with Redux-Form return null使用 Redux-Form 的值返回 null
【发布时间】:2018-11-23 11:40:55
【问题描述】:

我使用 Redux 和 React,在使用 API 的 CRUD 操作中,createPost 使用 Redux-Form 将 null 返回到 titlecategoriescontent 的值中?

我可以帮忙,我不知道我的错误是什么?

动作文件 index.js

export const CREATE_POST = 'CREATE_POST';
const URL = 'http://reduxblog.herokuapp.com/api';
const API_KEY = '1234557';

export function createPost(props) {
const request = axios
  .post(`${URL}/posts?${API_KEY}`, props)
  .then( res => { console.log(res) })
  return {
    type: CREATE_POST,
    payload: request,
  };
}

组件文件 newPost.js

import React from 'react';
import { reduxForm } from 'redux-form';
import {crearPost} from '../acciones/index';
import {connect} from 'react-redux';
class NuevoPost extends React.Component {
    onSubmit(values) {
        this.props.crearPost(values)


    }
    render() { 

        const {fields: {
            title, categories, content} , 
            handleSubmit } = this.props;
        return (
            <form onSubmit={
                handleSubmit(this.onSubmit.bind(this))}>
                <h3>Crea un nuevo Post.</h3>
                <div className='form-group'>
                    <label 
                    >titulo</label>
                    <input 
                    type='text' 
                    className='form-control'
                    {...title}
                    />
                </div>

                <div className='form-group'>
                    <label 
                    >Categoria</label>
                    <input 
                    type='text' 
                    className='form-control'
                    {...categories}
                    />
                </div>

                <div className='form-group'>
                    <label 
                    >Contenido</label>
                    <textarea 
                    type='text' 
                    className='form-control'
                    {...content}
                    />
                </div>
                <button 
                type="submit" 
                className="btn btn-info"
                >Postear</button>

            </form>
        )
    }
}


export default reduxForm({
 form: 'newPost',  
 fields: ['title', 'categories', 'content']
})(connect(null, { crearPost })(NuevoPost));

【问题讨论】:

    标签: reactjs api redux redux-form


    【解决方案1】:

    你需要在这里使用redux-formField

    import { reduxForm, Field } from 'redux-form';
    
    <div className='form-group'>
      <label>Categoria</label>
      <Field
        type='text' 
        className='form-control'
        component={'input'}
      />
    </div>
    

    【讨论】:

    • 非常感谢 Ashish,最新版本的文档有所不同..
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-06-06
    • 2016-05-07
    • 1970-01-01
    相关资源
    最近更新 更多