2017-04-17 244 views
0

我在使用eslint-plugin-react插件的反应组件中遇到了ESLint和箭头函数的一些问题。我只是做了这些命令:ESLint eslint-plugin-react箭头函数

  1. npm i -g eslint eslint-plugin-react
  2. eslint SignUpPage.jsx

这里是SignUpPage:

/** 
* Created by jwilso37 on 4/5/2017. 
*/ 

import React from 'react'; 
import SignUpForm from '../components/landing/SignUpForm.jsx'; 
import 'whatwg-fetch' 


class SignUpPage extends React.Component { 

    constructor(props) { 
     super(props); 

     this.state = { 
      errors: {}, 
      user: { 
       email: '', 
       name: '', 
       password: '' 
      } 
     }; 
    } 

    /** 
    * Change the user object. 
    * 
    * @param {object} e - the JavaScript event object 
    */ 

    changeUser = (e) => { 
     const field = e.target.name; 
     const user = this.state.user; 
     user[field] = e.target.value; 

     this.setState({ 
      user 
     }); 
    }; 

    /** 
    * Handles processForm event and submits request to server. 
    * @param e 
    */ 
    processForm = (e) => { 
     e.preventDefault(); 
     const form = document.querySelector('form'); 
     const formData = new FormData(form); 

     fetch('/api/signup', { 
      method: 'POST', 
      body: formData 
     }).then(response => { 
      if (response.ok) { 
       this.setState({ 
        errors: {} 
       }); 
      } 
      else { 
       // returned > 300 status code 
       response.json().then(j => { 
        const errors = j.errors ? j.errors : {}; 
        errors.summary = j.message; 
        this.setState({ 
         errors: errors 
        }) 
       }) 
      } 
     }) 
    }; 


    /** 
    * Render the component. 
    */ 
    render() { 
     return (
      <SignUpForm 
       onSubmit={this.processForm} 
       onChange={this.changeUser} 
       errors={this.state.errors} 
       user={this.state.user} 
      /> 
     ); 
    } 

} 

export default SignUpPage; 

但eslint的输出是奇怪的:

[email protected]:/vagrant/client/src/containers$ eslint signuppage.jsx 

/vagrant/client/src/containers/signuppage.jsx 
    31:16 error Parsing error: Unexpected token = 

说匿名函数changeUser上的=符号是错误的?这是我的.eslintrc.json

{ 
    "plugins": [ 
    "react" 
    ], 
    "settings": { 
    "react": { 
     "createClass": "createClass", // Regex for Component Factory to use, default to "createClass" 
     "pragma": "React", // Pragma to use, default to "React" 
     "version": "15.0" // React version, default to the latest React stable release 
    } 
    }, 
    "parserOptions": { 
    "sourceType": "module", 
    "ecmaVersion": 6, 
    "ecmaFeatures": { 
     "jsx": true 
    } 
    }, 
    "extends": ["eslint:recommended", "plugin:react/recommended"], 
    "env": { 
    "browser": true 
    } 
} 
+0

你说得对,那是有效的语法。我已经删除了我的答案 – chazsolo

回答

2

好吧,我似乎已经修好了。我意识到我的JSX传播运算符不能正常工作后,我安装了babel-eslintnpm i --save-dev babel-eslint。这让我觉得所有的ES6东西都搞砸了。所以现在我只是添加了babel-eslint解析器,并将"parser": "babel-eslint"添加到我的.eslintrc.json文件的末尾,一切都很好!我猜默认的eslint解析器不支持这些功能......

+0

确实有效,我改进了阅读您的分辨率 – Malaba