Question

使用react-redux不可变形式，当我尝试在redux组合内部传递redux-form时，它会抛出错误“您必须将组件传递给connect返回的函数”

    import React from 'react';
    import { connect } from 'react-redux';
    import { compose } from 'redux';
    import { Field, reduxForm } from 'redux-form/immutable';";

    import makeSelectUser from "./selectors";
    import actionCreators from "./actions";

    class EditUser extends React.PureComponent {

    }

    const mapDispatchToProps = bindActionCreators;

    const mapStateToProps = makeSelectUser();

    const withConnect = connect(
      mapStateToProps,
      mapDispatchToProps(actionCreators)
    );

    export default compose(
      withConnect,
      reduxForm({
        destroyOnUnmount: false,
        enableReinitialize: true,
        keepDirtyOnReinitialize: true,
        form: 'EditUser'
      })
    )(EditUser);

获取错误

browser.js?40b6:38 Uncaught Error: You must pass a component to the function returned by connect. Instead received {"defaultProps":{"touchOnBlur":true,"touchOnChange":false,"persistentSubmitErrors":false,"destroyOnUnmount":false,"enableReinitialize":true,"keepDirtyOnReinitialize":true,"updateUnregisteredFields":false,"pure":true,"forceUnregisterOnUnmount":false,"form":"EditUser"}}

Answer 1

根据How do I mapStateToProps or mapDispatchToProps，您首先需要connect您的组件，然后将其传递给reduxForm。

因此您需要在compose中切换参数的顺序：

export default compose(
  reduxForm({
    destroyOnUnmount: false,
    enableReinitialize: true,
    keepDirtyOnReinitialize: true,
    form: 'EditUser'
  }),      
  withConnect
)(EditUser);

注意compose是

通过组合自变量函数获得的函数    从右到左。
   例如，compose（f，g，h）与执行相同   （... args）=> f（g（h（... args）））

撰写失败的Redux表单引发错误

1 个答案: