import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from './containers/App';
import NotFoundPage from './containers/NotFoundPage.js';
import LoginPage from './containers/LoginPage';
import FormPage from './containers/FormPage';
import TablePage from './containers/TablePage';
import Dashboard from './containers/DashboardPage';
import Masques from './containers/Masques'
import Paques from './containers/Paques'
export default (
<Route>
<Route path="login" component={LoginPage}/>
<Route path="/" component={App}>
<IndexRoute component={Dashboard}/>
<Route path="dashboard" component={Dashboard}/>
<Route path="form/:id" component={FormPage}/>
<Route path="test" component={Masques}/>
<Route path="paques" component={Paques}/>
<Route path="table" component={TablePage}/>
<Route path="*" component={NotFoundPage}/>
</Route>
</Route>
);
import React, { Component} from 'react';
import {Link} from 'react-router';
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ContentCreate from 'material-ui/svg-icons/content/create';
import ContentAdd from 'material-ui/svg-icons/content/add';
import {pink500, grey200, grey500, redA200} from 'material-ui/styles/colors';
import PageBase from '../components/PageBase';
import Data from '../data';
import ContentDeleteSweep from 'material-ui/svg-icons/content/delete-sweep';
import axios from 'axios';
import src from './src' ;
class Masques extends Component {
.....
};
export default Masques;
我正在开发一个反应式Web应用程序,我刚刚下载了一个模板并开始工作,但似乎我遇到了一些意外错误,代码在浏览器上运行良好但我运行npm start我得到这些错误但该应用程序运行甚至完美的enter image description here
这里也是他们谈论的页面的源代码
import React, { Component} from 'react';
import {Link} from 'react-router';
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ContentCreate from 'material-ui/svg-icons/content/create';
import ContentAdd from 'material-ui/svg-icons/content/add';
import {pink500, grey200, grey500, redA200} from 'material-ui/styles/colors';
import PageBase from '../components/PageBase';
import Data from '../data';
import ContentDeleteSweep from 'material-ui/svg-icons/content/delete-sweep';
import axios from 'axios';
import src from './src' ;
class Masques extends Component {
state={
masque:[]
};
componentWillMount(){
this.masqueAff()
};
masqueAff=()=>{
var url=src.url+'masqueAff.php/?idcata=1';
axios.get(url)
.then((response) => {
console.log(response);
//alert(JSON.stringify(response.data))
this.setState({masque:response.data});
//alert(this.state.masque)
})
.catch(function (error) {
console.log(error);
});
};
render() {
const styles = {
floatingActionButton: {
margin: 0,
top: 'auto',
right: 20,
bottom: 20,
left: 'auto',
position: 'fixed',
},
editButton: {
fill: grey500
},
columns: {
id: {
width: '10%'
},
name: {
width: '40%'
},
price: {
width: '20%'
},
category: {
width: '20%'
},
edit: {
width: '10%'
}
}
};
return (
<PageBase title="Table Page"
navigation="Application / Table Page">
<div>
<Link to="/form" >
<FloatingActionButton style={styles.floatingActionButton} backgroundColor={pink500}>
<ContentAdd />
</FloatingActionButton>
</Link>
<Table>
<TableHeader>
<TableRow>
<TableHeaderColumn>ID</TableHeaderColumn>
<TableHeaderColumn>Name</TableHeaderColumn>
<TableHeaderColumn>Price</TableHeaderColumn>
<TableHeaderColumn>Category</TableHeaderColumn>
<TableHeaderColumn>Edit</TableHeaderColumn>
<TableHeaderColumn>Delete</TableHeaderColumn>
</TableRow>
</TableHeader>
<TableBody>
{this.state.masque.map(item =>
<TableRow key={item.id}>
<TableRowColumn>{item.id}</TableRowColumn>
<TableRowColumn>{item.nom}</TableRowColumn>
<TableRowColumn>{item.prix}</TableRowColumn>
<TableRowColumn>{item.idCata==1?<p>Peaux</p>:<p>Cheuveux</p>}</TableRowColumn>
<TableRowColumn>
<Link className="button" to="/form">
<FloatingActionButton zDepth={0}
mini={true}
backgroundColor={grey200}
iconStyle={styles.editButton}>
<ContentCreate />
</FloatingActionButton>
</Link>
</TableRowColumn>
<TableRowColumn>
<Link className="button" to="/form/1">
<FloatingActionButton zDepth={0}
mini={true}
backgroundColor={redA200}
iconStyle={styles.editButton}>
<ContentDeleteSweep />
</FloatingActionButton>
</Link>
</TableRowColumn>
</TableRow>
)}
</TableBody>
</Table>
</div>
</PageBase>
);
};}
export default Masques;
上图中显示的错误是问题。错误显示在图像的下方,其中:
React.createElement: type is invalid -- expected a string or a class/function but got: undefined
这意味着您输入错误。有两种类型的进口和出口default
和named
。例如
// a.js
const a =1;
const b= 2;
const c =3;
export {a, b};// named export
export default c;// default export
然后在其他文件例如b.js他们可以导入为
import {a, b} from './a.js';// named import. Name for import should be same as export
import c from './a.js';// default import. Name of import can be differ from name of export
请验证您的导入,导出声明。错误是因为您的某个导入错误
在React组件中,您应该在构造函数中设置初始状态。
constructor(props) {
super(props);
this.state = { masque: [] };
}
代替
state={
masque:[]
};
此外,如果我看到正确,它会在第9行出现错误。检查导入的模块是否正确导出并具有导出默认值。