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';

...如果您的导出标记为默认值，则无效。你可以删除＆＃34;默认＆＃34;来自您的导出，或者您可以将导入更改为：

import ItemFormModal from './ItemFormModal.jsx';

类型无效 - 需要一个字符串

1 个答案: