使用 Redux-Form 的值返回 null

Posted 2023-02-22

【中文标题】使用 Redux-Form 的值返回 null

【英文标题】：Values with Redux-Form return null

【发布时间】：2018-11-23 11:40:55

【问题描述】：

我使用 Redux 和 React，在使用 API 的 CRUD 操作中，createPost 使用 Redux-Form 将 null 返回到 title、categories 和 content 的值中？

我可以帮忙，我不知道我的错误是什么？

动作文件 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));

【参考方案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，最新版本的文档有所不同..