Javascript 类型无效--应为字符串

我正在用react JS和react的语义用户界面构建一个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);

import React，{Component，PropTypes}来自'React'；
从“meteor/react meteor数据”导入{createContainer}；
从“../api/Items.js”导入{Items}；
从“./Item.jsx”导入{Item}；
从“./ItemFormModal.jsx”导入{ItemFormModal}；
//应用程序组件-表示整个应用程序
导出类应用程序扩展组件{
renderItems（）{
返回此.props.items.map（（项目）=>(
));
}
render（）{
返回(
产品

{this.renderItems（）}

);
}
}
App.propTypes={
项目：需要PropTypes.array.isRequired，
};
//在客户端为集合创建容器
导出默认createContainer（（）=>{
返回{
//获取所有可用的项目
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>
        )
    }


}

从“../api/Items.js”导入{Items}；
从“React”导入React，{Component，PropTypes}；
从“react dom”导入react dom；
//导入所有语义资源
从“语义ui反应”导入{按钮、图标、标题、表单、模态}；
导出默认类ItemFormModal扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
标题：“，
价格:0.00,，
莫达洛彭：错
}
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（事件）{this.setState（{modalOpen:true}}
handleClose（事件）{this.setState（{modalOpen:false}}
handleInputChange（事件）{
const target=event.target；
const value=target.type==“checkbox”？target.checked:target.value；
const name=target.name；
这是我的国家({
[名称]：值
});
}
handleSubmit（事件）{
event.preventDefault（）；
设title=this.state.title.trim（）；
让价格=this.state.price；
项目.插入({
标题:标题,，
价格：价格，
重复出现：错误，
createdAt:new Date（），//当前时间
});
这是我的国家({
标题：“，
价格：0.00
});
}
render（）{
返回(
创造
创建新项目
取消
创造
)
}
}

---

非常感谢您的帮助

您正在错误地导入App.jsx。你有这个：

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

。。。如果您的导出被标记为默认值，则该选项将不起作用。您可以从导出中删除“默认”，也可以将导入更改为：

import ItemFormModal from './ItemFormModal.jsx';

---

您正在错误地导入App.jsx。你有这个：

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

。。。如果您的导出被标记为默认值，则该选项将不起作用。您可以从导出中删除“默认”，也可以将导入更改为：

import ItemFormModal from './ItemFormModal.jsx';

---

正如错误消息所说，“您可能忘记了从定义组件的文件中导出组件。”。你导出你的组件了吗？@Hackjutsu是的，我的类有这个

导出默认类ItemFormModal.component

发布你的ItemFormModal完整代码please@Cameron那个人看得很好。你也可以发布你的App.js吗？我想这是在抱怨。@sfratini好吧，不确定这是否会有帮助。我已经尝试了我能想到的一切，所以任何帮助都是感激的！正如错误消息所说，“您可能忘记了从定义组件的文件中导出组件。”。你导出你的组件了吗？@Hackjutsu是的，我的类有这个

导出默认类ItemFormModal.component

发布你的ItemFormModal完整代码please@Cameron那个人看得很好。你也可以发布你的App.js吗？我想这是在抱怨。@sfratini好吧，不确定这是否会有帮助。我已经尝试了我能想到的一切，所以任何帮助都是感激的！