Question

我正在使用redux-form的6.7.0版本，一旦Axios通过“fetchPerson”redux动作成功执行http get请求，我就无法初始化我的表单。我正在设置“enableReinitialize：true”，当我导出ReduxForm但它仍然没有呈现结果时。（顺便说一下，验证函数也没有被调用）

这是我的reducer的整个代码：

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { fetchPerson, editPerson } from '../actions';
import { connect } from 'react-redux';
import { Link} from 'react-router-dom';
import 'react-table/react-table.css';


class EditPerson extends Component {
  componentDidMount() {

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

  }

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

    return (

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

  onSubmit(values) {
    const { id } = this.props.match.params;
    this.props.editPerson(id,values, () => {
      this.props.history.push('/personas');
    });
  }

  render() {
     const { handleSubmit } = this.props;
     const { person } = this.props;
     if (!person) {
        return <div>Loading...</div>;
     }
     console.log("this.props");
     console.log(this.props);
     return (
            <div className="row">
                <div className="col-lg-12">
                    <div className="row wrapper border-bottom white-bg page-heading">
                        <div className="col-lg-10">
                            <h2>Editar Persona {person.name}</h2>
                            <ol className="breadcrumb">
                                <li>
                                    <a href="index.html">Home</a>
                                </li>
                                <li>
                                    <a href="personas/">Personas</a>
                                </li>
                                <li className="active">
                                    <strong>Editar Persona :{person.name}</strong>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>

                <div className="wrapper wrapper-content animated fadeInRight">

                    <div className="row">
                        <div className="col-lg-6">
                            <div className="row">
                                <div className="col-lg-12">
                                    <div className="well" style={{background: 'white'}}>
                                    <h3>Datos</h3>

                                      <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
                                        <Field
                                          label="Nombre"
                                          name="name"
                                          component={this.renderField}
                                        />
                                        <Field
                                          label="Email"
                                          name="email"
                                          component={this.renderField}
                                        />
                                        <Field
                                          label="Telefono"
                                          name="tel"
                                          component={this.renderField}
                                        />
                                        <button type="submit" className="btn btn-primary">Submit</button>
                                        <Link to="/personas" className="btn btn-danger">Cancel</Link>
                                      </form>

                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        )
    }

}

function validate(values) {
  // console.log(values) -> { title: 'asdf', categories: 'asdf', content: 'asdf' }
  const errors = {};

  // Validate the inputs from 'values'
  if (!values.name) {
    errors.title = "Enter a name";
  }
  if (!values.email) {
    errors.categories = 'Enter some email';
  }
  if (!values.tel) {
    errors.content = 'Enter some content telefono';
  }

  return errors;
}

function mapStateToProps(state) {
    console.log("state mapStateToProps");
    console.log(state);
    return {
      person: state.personas.person,
      initialValues:state.personas.person,
    }
};


export default reduxForm({

  enableReinitialize : true,
  form: 'PersonEditForm'
})(
  connect(mapStateToProps,{ editPerson, fetchPerson })(EditPerson)
);

这是我的浏览器控制台，其中第二行创建了personas.person：

Answer 1

redux表单docs显示使用reduxForm函数和连接函数进行装饰的组件。尝试将其分解为：

EditPerson = reduxForm({
...
})(EditPerson)

export default connect(mapStateToProps, { ... })(EditPerson)

另请注意，这些值只会初始化一次。如果需要，您可以简单地将initialValues对象传递给上面的表单，并从库中调度初始化操作以重新填充初始值。

无法使用来自Axios的值初始化redux-form

1 个答案: