/ / Fusión de función de flecha ES6 y error de compilación de gulp - reactjs, gulp, ecmascript-6

Fragmento de la función de flecha ES6 y error de compilación de trago - reactjs, gulp, ecmascript-6

He estado tratando de lograr el segmento de código a continuación, leyendo documentos oficiales de ES6 y otros blogs:

onHomeStoreChange = () => (newState) {
this.setState(newState);
}

Usé esto enlazar. pero parece que Gulp no hace su trabajo correctamente, me sale A semicolon is required after a class property error, pero incluso después de poner uno this es todavía undefined. Aquí hay una parte del archivo gulp que usa transformar.

appBundler
// transform ES6 and JSX to ES5 with babelify
.transform("babelify", {presets: ["es2015", "stage-0", "react"]})
//.transform(babelify.configure({stage: 0}))
.bundle()
.on("error",gutil.log)
.pipe(source("bundle.js"))
.pipe(gulp.dest(buildDestination));

Yo uso reaccionar 0.14.5 y estas son mis dependencias de desarrollo

"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"babelify": "7.2.0",
"browserify": "^12.0.1",
"gulp": "^3.9.0",
"gulp-if": "^2.0.0",
"gulp-streamify": "^1.0.2",
"gulp-uglify": "^1.5.1",
"gulp-util": "^3.0.7",
"vinyl-source-stream": "^1.1.0"

Estoy confundido y cualquier ayuda sería muy apreciada.

editar - agregar el código de reacción completa

export default class App extends React.Component {
constructor(props) { //put componentWillMount code in constructor
super(props);

//this.bindMethods();
this.state = HomeStore.getState();
}

componentDidMount() {
HomeStore.listen(this.onHomeStoreChange);
}

componentWillUnmount() {
HomeStore.unListen(this.onHomeStoreChange);
}

onHomeStoreChange = (newState) => {
//I had syntax error here
this.setState(newState);
}

render() {
return (
<div>
components will go here
</div>
);
}

bindMethods() {
this.onHomeStoreChange = this.onHomeStoreChange.bind(this);
}
}

Si uso bindMethods () funciona pero no =

Respuestas

2 para la respuesta № 1

Usted tiene un conjunto adicional de corchetes. Una función de flecha debe tomar su argumento en el primer conjunto de corchetes:

onHomeStoreChange = (newState) => {
this.setState(newState);
};

El error que estás viendo se debe a que has definido efectivamente onHomeStoreChange como () => (newState), y luego lo siguió con y extra {...} bloquear.