I'm having some trouble with ESLint and arrow functions in a react component using the eslint-plugin-react
plugin. I just did these commands:
npm i -g eslint eslint-plugin-react
eslint SignUpPage.jsx
And here is 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;
But the output of eslint is oddly this:
ubuntu@ETFly:/vagrant/client/src/containers$ eslint signuppage.jsx
/vagrant/client/src/containers/signuppage.jsx
31:16 error Parsing error: Unexpected token =
Saying that the =
sign on the changeUser
anonymous function is an error? Here's my .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
}
}
OK I seemed to have fixed it. I installed babel-eslint
with npm i --save-dev babel-eslint
after I realized my JSX spread operator wasn't working as well. It made me think that all of ES6 stuff was messed up. So now I just added babel-eslint
parser with adding "parser": "babel-eslint"
to the end of my .eslintrc.json
file and everything is good! I guess the default eslint parser doesn't support these features...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.