将初始值传递给 redux-form

Question

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

这是我的 react-redux 组件，它包含 redux 形式：

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

Pass initial value to redux-form

javascript

reactjs

redux-form

react-redux