Question

我正在我的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));

提前致谢！

Answer 1

//尝试它可能有效！

const withConnect = connect（ mapStateToProps， mapDispatchToProps，）;

导出默认撰写文件（ withConnect，）（withRouter（ManageUsersPage））;

React Redux Container - 创建包含redux表单并收到错误的页面

1 个答案: