将初始值传递给redux-form

Ari*_*deh 4 javascript reactjs redux-form react-redux

我想将初始值(来自react-redux组件的道具)传递给我的redux-form.但是,当我检查传递给的数据时,我没有价值renderField.我在这里跟着职位SO和终极版形式git的论坛,我使用initialValuesmapStateToProps,但它仍然无法正常工作.

这是我的react-redux组件,它包含redux-form:

class ShowGroup extends Component {

  render() {
    if (this.state.loading) {
      return <div>Loading group ....</div>;
    }
    if (this.state.error) {
      return <div>{this.state.error}</div>;
    }
    let group = this.props.groups[this.groupId];
    return (
      <div className="show-group">
        <form>
          <Field
            name="name"
            fieldType="input"
            type="text"
            component={renderField}
            label="Name"
            validate={validateName}
          />
        </form>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    groups: state.groups,
    initialValues: {
      name: 'hello'
    }
  };
}

const mapDispatchToProps = (dispatch) => {
    return {
             //.....
    };
};

export default reduxForm({
  form:'ShowGroup'
})(
  connect(mapStateToProps, mapDispatchToProps)(ShowGroup)
);
Run Code Online (Sandbox Code Playgroud)

这是我的renderField代码:

export const renderField = function({ input, fieldType, label, type, meta: { touched, error }}) {
  let FieldType = fieldType;
  return (
    <div>
      <label>{label}</label>
      <div>
        <FieldType {...input} type={type} />
        {touched && error && <span>{error}</span>}
      </div>
    </div>
  );
}
Run Code Online (Sandbox Code Playgroud)

Shu*_*tri 8

您正在导出包含错误顺序的包装组件

export default reduxForm({
  form:'ShowGroup'
})(
  connect(mapStateToProps, mapDispatchToProps)(ShowGroup)
);
Run Code Online (Sandbox Code Playgroud)

应该

export default connect(mapStateToProps, mapDispatchToProps)(reduxForm({
  form:'ShowGroup'
})(ShowGroup);
Run Code Online (Sandbox Code Playgroud)

原因是redux形式HOC需要initialValues自己的道具,如果你颠倒顺序,reduxForm不会得到道具,而是直接传递给组件,组件不知道如何处理它.