ReactJS – “undefined is not an object” this.state is not bound

The react-native component I created through React.createClass doesn’t seem to bind the this keyword correctly, preventing me from accessing this.state. This is the error I get:

error

The code is as follows. I don’t see it on the website The examples are fundamentally different, so I can’t figure out what I am doing wrong. How can I solve this problem?

'use strict';

var React = require('react-native');

var Main = React.createClass({
getInitialState: () => {
return {username:'', isloading: false, iserror: false };
},
handleChange: (event ) => {
this.setState({
username: event.nativeEvent.text
});
},
handleSubmit: (event) => {< br /> this.setState({
isloading: true
});
console.log('Submitting... '+ this.state.username);
},
render: () => {
return (

Search for a Github User
value={this.state.username}
onChange={this.handleChange.bind(this)} />
underlayColor='white'
onPress={this.h andleSubmit.bind(this)} />
SEARCH

);
}
});

var {Text, View, StyleSheet, TextInput, TouchableHighlight, ActivityIndicatorIOS} = React;

var styles = StyleSheet.create({
mainContainer : {
flex: 1,
padding: 30,
marginTop: 65,
flexDirection:'column',
justifyContent:'center',
backgroundColor:'#48BBEC'
},
title: {
marginBottom: 20,
fontSize: 25,
textAlign:'center',
color :'#fff'
},
searchInput: {
height: 50,
padding: 4,
marginRight: 5,
fontSize: 23,
borderWidth: 1,
borderColor:'white',
borderRadius: 8,
color:'white'
},
buttonText: {
fontSize: 18,
color:'#111',
alignSelf:'center'
},
button: {
height: 45,
f lexDirection:'row',
backgroundColor:'white',
borderColor:'white',
borderWidth: 1,
borderRadius: 8,
marginBottom: 10,
marginTop: 10,
alignSelf:'stretch',
justifyContent:'center'
},
});

module. exports = Main

The problem is to use ES6 fat arrows in rendering: ()=> {This will As a result, the automatic adjustment function provided by React in the .createClass function does not work properly.

Just change it to rendering: if you don’t want to convert your code to ES6 classes, the function (){. .It should solve the problem.

If you do convert it to ES6 class, please check this

Methods follow the same semantics as regular ES6 classes, meaning that they don’t automatically bind this to the instance. You’ll have to explicitly use .bind(this) or arrow functions =>.

The react-native component I created through React.createClass does not seem to bind the this keyword correctly, preventing me from accessing this.state. This is the error I get:

error

The code is as follows. I don’t see any substantial difference from the examples on the website. So I can’t figure out what I did wrong. How can I Can solve this problem?

'use strict';

var React = require('react-native');

var Main = React.createClass({
getInitialState: () => {
return {username:'', isloading: false, iserror: false };
},
handleChange: (event ) => {
this.setState({
username: event.nativeEvent.text
});
},
handleSubmit: (event) => {< br /> this.setState({
isloading: true
});
console.log('Submitting... '+ this.state.username);
},
render: () => {
return (

Search for a Github User
value={this.state.username}
onChange={this.handleChange.bind(this)} />
underlayColor='white'
onPress={this.han dleSubmit.bind(this)} />
SEARCH

);
}
});

var {Text, View, StyleSheet, TextInput, TouchableHighlight, ActivityIndicatorIOS} = React;

var styles = StyleSheet.create({
mainContainer : {
flex: 1,
padding: 30,
marginTop: 65,
flexDirection:'column',
justifyContent:'center',
backgroundColor:'#48BBEC'
},
title: {
marginBottom: 20,
fontSize: 25,
textAlign:'center',
color :'#fff'
},
searchInput: {
height: 50,
padding: 4,
marginRight: 5,
fontSize: 23,
borderWidth: 1,
borderColor:'white',
borderRadius: 8,
color:'white'
},
buttonText: {
fontSize: 18,
color:'#111',
alignSelf:'center'
},
button: {
height: 45,
fle xDirection:'row',
backgroundColor:'white',
borderColor:'white',
borderWidth: 1,
borderRadius: 8,
marginBottom: 10,
marginTop: 10,
alignSelf:'stretch',
justifyContent:'center'
},
});

module. exports = Main

The problem is to use the ES6 fat arrow in the rendering: ()=> {This will lead to the automatic adjustment function provided by React in the .createClass function Doesn’t work.

Just change it to render: If you don’t want to convert your code to ES6 classes, the function(){.. should solve the problem.

If you do convert it to ES6 classes, please check this

Methods follow the same semantics as regular ES6 classes, meaning that they don’t automatically bind this to the instance. You’ll have to explicitly use .bind(this) or arrow functions =>.

Leave a Comment

Your email address will not be published.