재료 - UI 오류 반응

Question

내 구성 요소의 재질 UI 표를 추가하려고 할 때까지 재료 UI 버전 1.0.0.beta25와 함께 완벽하게 작동하는 데 사용 내 프로젝트 데모 (https://material-ui-next.com/demos/tables/)

를 사용하여 문제는 BetBuilder에 표 구성 요소를 추가 할 때 정확하게 발생합니다.

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); 
} 

내 응용 프로그램 요소 :

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

,363,210

Answer 1

가져 오기가 잘못, 그것은해야한다 :

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