種類が無効です - 文字列が必要です

Question

私は反応のためにReactJSとSemantic-UIを備えたMeteorアプリケーションを構築しています。私はモーダルとして表示される新しい項目のフォームを作成しようとすると問題に遭遇しました。次のエラーが表示されます。

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `App`. 

App.jsxファイル：

import React, { Component, PropTypes } from 'react'; 
import { createContainer } from 'meteor/react-meteor-data'; 

import { Items } from '../api/items.js'; 

import { Item } from './Item.jsx'; 
import { ItemFormModal } from './ItemFormModal.jsx'; 

// App component - represents the whole app 
export class App extends Component { 

    renderItems() { 
    return this.props.items.map((item) => (
     <Item key={item._id} item={item} /> 
    )); 
    } 

    render() { 
    return (
     <div className="container"> 
     <header> 
      <h1>Products</h1> 

      <ItemFormModal /> 
     </header> 

     <ul className="collection"> 
      {this.renderItems()} 
     </ul> 
     </div> 
    ); 
    } 
} 


App.propTypes = { 
    items: PropTypes.array.isRequired, 
}; 


// creates container on client side for the collection 
export default createContainer(() => { 
    return { 

    // fetch all the items available 
    items: Items.find({}, { sort: { createdAt: -1 } }).fetch(), 
    }; 
}, App); 

編集：私はそれが全体ItemFormModal.jsxを反映するために変更されました：

import { Items } from '../api/items.js'; 

import React, { Component, PropTypes } from 'react'; 
import ReactDOM from 'react-dom'; 

// Import all semantic resources 
import { Button, Icon, Header, Form, Modal } from 'semantic-ui-react'; 


export default class ItemFormModal extends React.Component { 

    constructor(props) { 
     super(props); 

     this.state = { 
      title: "", 
      price: 0.00, 
      modalOpen: false 
     } 


     this.handleOpen = this.handleOpen.bind(this); 
     this.handleClose = this.handleClose.bind(this); 
     this.handleInputChange = this.handleInputChange.bind(this); 
     this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleOpen(event) { this.setState({ modalOpen: true }) } 

    handleClose(event) { this.setState({ modalOpen: false }) } 

    handleInputChange(event) { 
     const target = event.target; 
     const value = target.type === "checkbox" ? target.checked : target.value; 
     const name = target.name; 

     this.setState({ 
     [name]: value 
     }); 
    } 

    handleSubmit(event) { 
     event.preventDefault(); 

     let title = this.state.title.trim(); 
     let price = this.state.price; 

     Items.insert({ 
     title: title, 
     price: price, 
     recurring: false, 
     createdAt: new Date(), // current time 
     }); 

     this.setState({ 
     title: "", 
     price: 0.00 
     }); 
    } 

    render() { 
     return (
      <div id="new-item"> 
       <Button onClick={this.handleOpen}>Create</Button> 
       <Modal 
        open={this.state.modalOpen} 
        onClose={this.handleClose} 
        size="small" 
        closeIcon="close"> 
        <Modal.Header>Create new item</Modal.Header> 

        <Modal.Content> 
         <Form> 
          <Form.Group> 
           <Form.Input name="title" label="Title" placeholder="Title" value={this.state.title} onChange={this.handleInputChange}/> 
           <Form.Input name="price" label="Price" placeholder="Price" value={this.state.price} onChange={this.handleInputChange} /> 
          </Form.Group> 
         </Form> 
        </Modal.Content> 
        <Modal.Actions> 
         <Button className="negative" onClick={this.handleClose}>Cancel</Button> 
         <Button className="positive" onClick={this.handleSubmit}>Create</Button> 
        </Modal.Actions> 

       </Modal> 
      </div> 
     ) 
    } 


} 

すべてのヘルプは大歓迎です！

Answer 1

App.jsxに正しくインポートされません。

import { ItemFormModal } from './ItemFormModal.jsx'; 

...エクスポートがデフォルトとしてマークされていると機能しません。

import ItemFormModal from './ItemFormModal.jsx';