解析错误:意外的令牌= ReactJs

问题描述 投票:0回答:2

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;
javascript reactjs npm react-router babel
2个回答
1
投票

上图中显示的错误是问题。错误显示在图像的下方,其中:

React.createElement: type is invalid -- expected a string or a class/function but got: undefined

这意味着您输入错误。有两种类型的进口和出口defaultnamed。例如

// 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

请验证您的导入,导出声明。错误是因为您的某个导入错误


-2
投票

在React组件中,您应该在构造函数中设置初始状态。

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

代替

state={
    masque:[]
};

此外,如果我看到正确,它会在第9行出现错误。检查导入的模块是否正确导出并具有导出默认值。

© www.soinside.com 2019 - 2024. All rights reserved.