Question

我想将初始值（来自react-redux组件的道具）传递给我的redux-form。但是，当我检查传递给renderField的数据时，我没有价值。我在SO和redux-form git论坛上关注了帖子，我在initialValues中使用了mapStateToProps，但它仍然没有用。

这是我的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)
);

这是我的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>
  );
}

Answer 1

您正在导出包含错误订单的包装组件

export default reduxForm({
  form:'ShowGroup'
})(
  connect(mapStateToProps, mapDispatchToProps)(ShowGroup)
);

应该是

export default connect(mapStateToProps, mapDispatchToProps)(reduxForm({
  form:'ShowGroup'
})(ShowGroup);

原因是redux形式的HOC需要initialValues道具本身，如果你颠倒顺序，reduxForm没有获得道具，而是直接传递给组件，它不知道如何处理它。

将初始值传递给redux-form

1 个答案: