React/redux 输入值未显示

Question

我将 react/redux 与 redux-form 一起使用，但出于某种原因，输入值未显示在我的编辑表单中。

I console.log my post 它表明它们在那里，但由于某种原因它不起作用。我将 post 下面的代码。

编辑组件：

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

Answer 1

不是直接设置值，而是传递一个 initialValues 属性：

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

从表单中的 Field 中删除 value 道具。只要您的 Post 对象的属性与您要填充的字段的名称相同，您就可以使用对象传播。如果它们不同，您必须适当地映射它们

initialValues: {
  contentField: post.content
}

<Field name="contentField" />

在使用 reduxForm 增强器之前必须设置初始值。另外，因为我知道它会出现（相信我，它最终总会出现），如果你希望你的表单值在你的模型更新时更新，你将添加 enableReinitialize: true 到 reduxForm的配置

React/redux 输入值未显示

React/redux input values not showing

reactjs

redux

redux-form