Reactjs 不显示React/redux输入值

我正在使用react/redux和redux表单，由于某些原因，输入值没有显示在我的编辑表单上

我将console.log记录我的帖子，它显示它们在那里，但由于某些原因，它不起作用。我将在下面发布代码

编辑组件：

import React , { Component } from 'react';
import * as actions from '../../actions/posts_actions';
import { reduxForm, Field } from 'redux-form';
import {connect} from 'react-redux';
import {Link} from 'react-router-dom';

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

  renderField(field) {
    const { meta: {touched, error} } = field;
    const className = `form-group ${touched && error ? 'has-danger' : ''}`;

    return (
      <div className={className}>
        <label><strong>{field.label}:</strong></label>
        <input
          className="form-control"
          type={field.type}
          value={field.value}
          {...field.input}
        />
        <div className="text-help">
          { touched ? error : ''}
        </div>
      </div>
    )
  }

  onSubmit(values) {
    const {id} = this.props.match.params;

    this.props.updatePost(values, id, () => {
      this.props.history.push(`/posts/${id}`);
    });
  }

  render() {
    const {handleSubmit} = this.props;

    const {post} = this.props;

    if(!post) {
      return <div> Loading... </div>;
    }
    console.log(post);

    return (
      <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
        <Field
          label="Title"
          name="title"
          type="text"
          value={post.title}
          component={this.renderField}
        />
        <Field
          label="Content"
          name="content"
          type="text"
          value={post.content}
          component={this.renderField}
        />
        <button type="submit" className="btn btn-success">Submit</button>
        <Link to={`/posts/${post._id}`} className="btn btn-danger">Cancel</Link>
      </form>
    );
  }
}

function validate(values) {
  const errors = {};

  if(!values.title) {
    errors.title = "Enter a title!";
  }
  if(!values.content) {
    errors.content = "Enter some content please!";
  }

  return errors;
}

function mapStateToProps({ posts }, ownProps) {
  return { post: posts[ownProps.match.params.id] };
}

export default reduxForm({
  validate,
  form: 'editform'
})(connect(mapStateToProps, actions)(EditPost));

import React，{Component}来自'React'；
从“../../actions/posts_actions”导入*作为操作；
从'redux form'导入{reduxForm，Field}；
从'react redux'导入{connect}；
从'react router dom'导入{Link}；
类EditPost扩展组件{
componentDidMount（）{
const{id}=this.props.match.params；
this.props.getOnePost（id）；
}
渲染场（场）{
常量{meta:{toucted，error}}=field；
const className=`form group${moved&&error？'has danger'：'}`；
返回(
{field.label}:
{触摸？错误：“”
)
}
onSubmit（值）{
const{id}=this.props.match.params；
this.props.updatePost（值，id，（）=>{
this.props.history.push（`/posts/${id}`）；
});
}
render（）{
const{handleSubmit}=this.props；
const{post}=this.props；
如果（！post）{
返回装载；
}
控制台日志（post）；
返回(
提交
取消
);
}
}
函数验证（值）{
常量错误={}；
如果（！values.title）{
errors.title=“输入标题！”；
}
如果（！values.content）{
errors.content=“请输入一些内容！”；
}
返回错误；
}
函数mapStateToProps（{posts}，ownProps）{
返回{post:posts[ownProps.match.params.id]}；
}
导出默认reduxForm({
验证
表单：“编辑表单”
})（连接（mapstatetrops，actions）（EditPost））；

不要直接设置值，而是传递

初始值

属性：

function mapStateToProps({ posts }, ownProps) {
  const post = posts[ownProps.match.params.id]
  return { 
    post,
    initialValues: {
      ...post
    }
  };
}

从表单中的

字段

s中删除

值

道具。只要

Post

对象上的属性与要填充的字段名称相同，就可以使用对象排列。如果它们不同，则必须对它们进行适当的映射

initialValues: {
  contentField: post.content
}

<Field name="contentField" />

初始值：{
contentField:post.content
}

在使用

reduxForm

增强器之前，必须设置初始值。另外，因为我知道它会出现（相信我，它最终总会出现），如果您想在模型更新时更新表单值，您必须将

启用重新初始化：true

添加到

reduxForm

的配置中