Reactjs React-Redux容器-创建包含Redux表单的页面并获取错误

我正在我的React/Redux项目中创建一个容器，在获得要渲染的基本组件之后，我现在尝试添加一个Redux表单，只需一个输入即可开始。我相信我已经完成了从

reduxForm

到我的组件的所有正确连接，但是出于任何原因，我得到了以下错误：

warning.js:36 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `ManageUsersPage`.

invariant.js:44 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `ManageUsersPage`.

谁能帮我找出我做错了什么？这是我的容器代码：

import React from 'react';
import { connect } from 'react-redux';
import selectManageUsersPage from './selectors';
import styles from './styles.css';
import { Dialog, TextField } from 'redux-form-material-ui';
import { Field, FieldArray, reduxForm, formValueSelector } from 'redux-form/immutable';
import RaisedButton from 'material-ui/RaisedButton';
import { fetchUsers } from './actions';

export class ManageUsersPage extends React.Component { // eslint-disable-line react/prefer-stateless-function

  constructor(props) {
    super(props);

    this.state = {
      userModalOpen: false,
      modalTitle: 'Add a user'
    }

    this.handleClose = this.handleClose.bind(this);
  }

  componentWillMount() {
    this.props.dispatch(fetchUsers());
  }


  /**
   * Open the user modal
   */
  openEditUserModal() {
    this.setState({
      userModalOpen: true,
      modalTitle: 'Edit user'
    });
  }


  /**
   *  Close the modal
   */
  handleClose() {
    this.setState({ userModalOpen: false });
  }


  /**
   *  Submit the user form
   */
  submit(formProps) {
    const user = {
      first_name: formProps.get('first_name')
    };

    console.log('user', user);
  }


  render() {
    // Redux Form Props.
    const { handleSubmit, pristine, reset, submitting } = this.props;
    return (
      <div className={styles.manageUsersPage}>
        <button onClick={::this.openCreateUserModal}>Create a user</button>
        <table className="responsive-table">
          <thead>
            <tr>
              <th scope="col">Name</th>
              <th scope="col">Role</th>
              <th scope="col"></th>

            </tr>
          </thead>
          <tbody>
            {this.props.users.map((user, index) => {
              return (
                <tr key={index}>
                  <th scope="row">
                    {user.profile.firstName} {user.profile.lastName}
                  </th>
                  <td>{user.role}</td>
                  <td><button onClick={::this.openEditUserModal}>Edit</button></td>
                </tr>
              )
            })}
          </tbody>
        </table>


        <Dialog
          title={this.state.modalTitle}
          modal={false}
          open={this.state.userModalOpen}
          onRequestClose={this.handleClose}
        >
          <form>
           <div className={styles.form__row}>
             <Field
               name="account_name"
               component={TextField}
               hintText="First Name"
             />
           </div>
           <div className="page-form__block">
             <div className="submit__block">
               <RaisedButton label="Create work order" disabled={pristine || submitting} onClick={handleSubmit(::this.submit)} primary={true} />
             </div>
           </div>
          </form>
        </Dialog>
      </div>
    );
  }
}

const mapStateToProps = selectManageUsersPage();

function mapDispatchToProps(dispatch) {
  return {
    dispatch,
  };
}

//export default connect(mapStateToProps, mapDispatchToProps)(ManageUsersPage);

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

从“React”导入React；
从'react redux'导入{connect}；
从“/选择器”导入selectManageUsersPage；
从“/styles.css”导入样式；
从“redux表单材质ui”导入{Dialog，TextField}；
从'redux form/immutable'导入{Field，FieldArray，reduxForm，formValueSelector}；
从“物料界面/RaisedButton”导入RaisedButton；
从“./actions”导入{fetchUsers}；
导出类ManageUsersPage扩展了React.Component{//eslint禁用行React/Prefere无状态函数
建造师（道具）{
超级（道具）；
此.state={
userModalOpen:false，
modalTitle:“添加用户”
}
this.handleClose=this.handleClose.bind（this）；
}
组件willmount（）{
this.props.dispatch（fetchUsers（））；
}
/**
*打开用户模式
*/
openEditUserModal（）{
这是我的国家({
userModalOpen:是的，
modalTitle:“编辑用户”
});
}
/**
*关闭模式
*/
handleClose（）{
this.setState（{userModalOpen:false}）；
}
/**
*提交用户表单
*/
提交（formProps）{
常量用户={
first\u name:formProps.get（'first\u name'）
};
console.log（'user'，user）；
}
render（）{
//重复使用表单道具。
const{handleSubmit，pristine，reset，submiting}=this.props；
返回(
创建用户
名称
角色
{this.props.users.map（（用户，索引）=>{
返回(
{user.profile.firstName}{user.profile.lastName}
{user.role}
编辑
)
})}
);
}
}
const-mapstatetops=selectManageUsersPage（）；
功能图DispatchToprops（调度）{
返回{
派遣，
};
}
//导出默认连接（mapStateToProps、mapDispatchToProps）（ManageUsersPage）；
导出默认reduxForm({
表格：'manageUsersPage'，
})（连接（MapStateTops、mapDispatchToProps）（ManageUsersPage））；

---

提前谢谢

//试试看，可能有用

const withConnect=connect( MapStateTops， mapDispatchToProps， );

导出默认组合( 通过连接，

---

)（使用路由器（ManageUsersPage））

//试试看，可能有用

const withConnect=connect( MapStateTops， mapDispatchToProps， );

导出默认组合( 通过连接，

---

)（使用路由器（ManageUsersPage））

你能发布console.log（'user'，user）的结果吗，还有用户道具？我完全愿意，但是由于这个错误，组件不会加载。如果我的导出语句看起来像导出默认连接（MapStateTops，mapDispatchToProps）（ManageUsersPage）这很好，但是当我尝试使用

reduxForm

时，它给了我一个错误：/你能发布

console.log（'user'，user'）的结果吗，还有用户道具？我完全愿意，但是由于这个错误，组件不会加载。如果我的导出语句看起来像导出默认连接（MapStateTops，mapDispatchToProps）（ManageUsersPage）

这很好，但是当我尝试使用

reduxForm

时，它会给我这个错误：/Welcome to Stack Overflow！请不要只回答源代码。试着提供一个关于你的解决方案如何工作的很好的描述。请参阅：。谢谢，来看看堆栈溢出！请不要只回答源代码。试着提供一个关于你的解决方案如何工作的很好的描述。请参阅：。谢谢