ReactJS Reduxライブ編集

Question

私はReact Redux Universal Hot Exampleのウィジェットの例のような同様のコードを作成しようとしています。唯一の例外は、データがPostgreSQLデータベースから取得されることです。

コードはグループを必要に応じて表示しますが、編集をクリックすると次のエラーが表示されます。ここで

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 `AdminGroupList` 
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 `AdminGroupList` 

は私AdminGroupList.js

import React, { Component } from 'react'; 
import Helmet from 'react-helmet'; 
import { connect } from 'react-redux'; 
import { asyncConnect } from 'redux-async-connect'; 
import { routeActions } from 'react-router-redux'; 
// import { Table } from 'react-bootstrap/lib'; 
import * as groupActions from 'redux/modules/groups'; 
import {isLoaded, load as loadGroups} from 'redux/modules/groups'; 
import {initializeWithKey} from 'redux-form'; 
import { GroupForm } from 'components/Admin/GroupForm'; 

@asyncConnect([{ 
    deferred: true, 
    promise: ({store: {dispatch, getState}}) => { 
    if (!isLoaded(getState())) { 
     return dispatch(loadGroups()); 
    } 
    } 
}]) 
@connect(
    state => ({ 
    groups: state.groups.data, 
    editing: state.groups.editing, 
    error: state.groups.error, 
    loading: state.groups.loading 
    }), 
    { ...groupActions, initializeWithKey, pushState: routeActions.push }) 
export default class AdminGroupList extends Component { 
    static propTypes = { 
    groups: React.PropTypes.object, 
    pushState: React.PropTypes.func.isRequired, 
    error: React.PropTypes.string, 
    loading: React.PropTypes.bool, 
    initializeWithKey: React.PropTypes.func.isRequired, 
    editing: React.PropTypes.object.isRequired, 
    load: React.PropTypes.func.isRequired, 
    editStart: React.PropTypes.func.isRequired 
    } 

    render() { 
    const groups = Object.values(this.props.groups); 
    const handleEdit = (group) => { 
     const {editStart} = this.props; 
     return() => editStart(String(group.id)); 
    }; 
    const { error, editing, loading, load} = this.props; 
    let refreshClassName = 'fa fa-refresh'; 
    if (loading) { 
     refreshClassName += ' fa-spin'; 
    } 
    return (
     <div className="container"> 
     <h1> 
      Tuoteryhmät ({groups.length}) 
      <button className="btn btn-success" onClick={load}> 
      {' '} Reload Groups 
      </button> 
     </h1> 
     <Helmet title="Groups"/> 
     {error && 
     <div className="alert alert-danger" role="alert"> 
      <span className="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> 
      {' '} 
      {error} 
     </div>} 
     {groups && groups.length && 
     <table className="table table-striped"> 
      <thead> 
      <tr> 
      <th>ID</th> 
      <th>Name</th> 
      <th></th> 
      </tr> 
      </thead> 
      <tbody> 
      { 
      groups.map((group) => editing[group.id] ? 
       <GroupForm formKey={String(group.id)} key={String(group.id)} initialValues={group}/> : 
       <tr key={group.id}> 
       <td>{group.id}</td> 
       <td>{group.name}</td> 
       <td> 
        <button className="btn btn-primary" onClick={handleEdit(group)}> 
        <i className="fa fa-pencil"/> Edit 
        </button> 
       </td> 
       </tr>) 
      } 
      </tbody> 
     </table>} 
     </div> 
    ); 
    } 
} 

されており、ここにあるGroupForm.js

import React, {Component, PropTypes} from 'react'; 
import {connect} from 'react-redux'; 
import {bindActionCreators} from 'redux'; 
import {reduxForm} from 'redux-form'; 
import groupValidation from 'utils/GroupValidation'; 
import * as groupActions from 'redux/modules/groups'; 

@connect(
    state => ({ 
    saveError: state.groups.saveError 
    }), 
    dispatch => bindActionCreators(groupActions, dispatch) 
) 
@reduxForm({ 
    form: 'group', 
    fields: ['id', 'name'], 
    validate: groupValidation 
}) 
export default class GroupForm extends Component { 
    static propTypes = { 
    fields: PropTypes.object.isRequired, 
    editStop: PropTypes.func.isRequired, 
    handleSubmit: PropTypes.func.isRequired, 
    invalid: PropTypes.bool.isRequired, 
    pristine: PropTypes.bool.isRequired, 
    save: PropTypes.func.isRequired, 
    submitting: PropTypes.bool.isRequired, 
    saveError: PropTypes.object, 
    formKey: PropTypes.string.isRequired, 
    values: PropTypes.object.isRequired 
    }; 

    render() { 
    const { editStop, fields: {id, name}, formKey, handleSubmit, invalid, 
     pristine, save, submitting, saveError: { [formKey]: saveError }, values } = this.props; 
    return (
     <tr> 
     <td>{id.value}</td> 
     <td> 
      <input type="text" className="form-control" {...name}/> 
      {name.error && name.touched && <div className="text-danger">{name.error}</div>} 
     </td> 
     <td> 
      <button className="btn btn-default" 
        onClick={() => editStop(formKey)} 
        disabled={submitting}> 
      <i className="fa fa-ban"/> Cancel 
      </button> 
      <button className="btn btn-success" 
        onClick={handleSubmit(() => save(values) 
        .then(result => { 
         if (result && typeof result.error === 'object') { 
         return Promise.reject(result.error); 
         } 
        }) 
       )} 
        disabled={pristine || invalid || submitting}> 
      <i className={'fa ' + (submitting ? 'fa-cog fa-spin' : 'fa-cloud')}/> Tallenna 
      </button> 
      {saveError && <div className="text-danger">{saveError}</div>} 
     </td> 
     </tr> 
    ); 
    } 
} 

Answer 1

このエラーメッセージは、あなたの輸入に問題があることを意味します。あなたはdefault class GroupFormと、デフォルトで輸出GroupFormをエクスポートする場合、あなたはAdminGroupList.jsで波括弧なしでそれをインポートする必要があり

：

あなたは絶対的に正しいですimport GroupForm from 'components/Admin/GroupForm'