响应中的表的Material-UI错误

Question

我的项目曾经与material-ui版本1.0.0.beta25完美配合，直到我尝试使用demo（https://material-ui-next.com/demos/tables/）在我的组件中添加Material Ui Table

问题正是我在BetBuilder上添加Table组件的时候。

The error is: 

Element 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 `BetBuilder`.

我想弄清楚发生了什么，我失去了：

我的index.jsp

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import Demo from './demo'
import { render } from 'react-dom';

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import 'typeface-roboto'


const rootElement = document.querySelector('#root');
if (rootElement) {
  render(<App />, rootElement);
}

我的App元素：

import React, { Component } from 'react';

import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
//import Drawer from 'material-ui/Drawer';
import BetBuilder from './containers/BetBuilder/BetBuilder';
import './App.css';

import PropTypes from 'prop-types';
import Toolbar from 'material-ui/Toolbar';
import IconButton from 'material-ui/IconButton';
import MenuIcon from 'material-ui-icons/Menu';
import Button from 'material-ui/Button';
import Typography from 'material-ui/Typography';


injectTapEventPlugin();
class App extends Component {
  render() {

    return (


      <div >
      <AppBar position="static">
        <Toolbar>
          <IconButton  color="contrast" aria-label="Menu">
            <MenuIcon />
          </IconButton>
          <Typography type="title" color="inherit" >
            Title
          </Typography>
          <Button color="contrast">Login</Button>
        </Toolbar>
      </AppBar>
        <BetBuilder></BetBuilder>

      </div>

    );
  }
}

export default App;

而我的BetBuilder：

import React, { Component } from 'react';

import Aux from '../../components/Hoc/Auxiliar'
import Team from '../../components/Match/Team/Team';
import Match from '../../components/Match/Match';
import classes from './BetBuilder.css';
import axios from 'axios';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Paper from 'material-ui/Paper';
import Grid from 'material-ui/Grid';
import { List, ListItem } from 'material-ui/List';
import Divider from 'material-ui/Divider';
import CommunicationCall from 'material-ui/SvgIcon';
import CommunicationChatBubble from 'material-ui/SvgIcon';
import { indigo500 } from 'material-ui/colors';
import CommunicationEmail from 'material-ui/SvgIcon';
import {
    Table,
    TableBody,
    TableHeader,
    TableHeaderColumn,
    TableRow,
    TableRowColumn,
    TableCell,
    TableHead

} from 'material-ui/Table';


const styles = theme => ({
    root: {
        width: '100%',
        marginTop: theme.spacing.unit * 3,
        overflowX: 'auto',
    },
    table: {
        minWidth: 700,
    },
});


const data = [
  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
  createData('Eclair', 262, 16.0, 24, 6.0),
  createData('Cupcake', 305, 3.7, 67, 4.3),
  createData('Gingerbread', 356, 16.0, 49, 3.9),
];

let id = 0;
function createData(name, calories, fat, carbs, protein) {
  id += 1;
  return { id, name, calories, fat, carbs, protein };
}


    class BetBuilder extends Component {



        constructor(props) {
            super(props);
            this.state = { matches: [] };
        }

        componentWillMount() {

            axios.get('http://localhost:3000/matches/')
                .then(response => {
                    console.log("Dentro do didmount");
                    this.setState({ matches: response.data });
                    console.log(this.state.matches);
                    console.log("Dentro do didmount");
                });


        }

        state = {
            matches: []

        }


        render() {

            var matches = this.state.matches.map(match =>
                <TableRow>
                    <TableCell>
                        <Match key={match.id} match={match} />
                    </TableCell>
                </TableRow>
            );
            const { classes } = this.props;
            return (

                <Paper className={classes.root}>
                    <Table className={classes.table}>
                        <TableHead>
                            <TableRow>
                                <TableCell>Dessert (100g serving)</TableCell>
                                <TableCell numeric>Calories</TableCell>
                                <TableCell numeric>Fat (g)</TableCell>
                                <TableCell numeric>Carbs (g)</TableCell>
                                <TableCell numeric>Protein (g)</TableCell>
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            {data.map(n => {
                                return (
                                    <TableRow key={n.id}>
                                        <TableCell>{n.name}</TableCell>
                                        <TableCell numeric>{n.calories}</TableCell>
                                        <TableCell numeric>{n.fat}</TableCell>
                                        <TableCell numeric>{n.carbs}</TableCell>
                                        <TableCell numeric>{n.protein}</TableCell>
                                    </TableRow>
                                );
                            })}
                        </TableBody>
                    </Table>
                </Paper>
            )
        }

    }





    export default withStyles(styles)(BetBuilder);

Answer 1

您的导入不正确，应该是：

import Table, {
    TableBody,
    TableHeader,
    TableHeaderColumn,
    TableRow,
    TableRowColumn,
    TableCell,
    TableHead
} from 'material-ui/Table';