CODEWITHSUNDEEP
javascriptreactjsreact-native
Mansur D
Mansur D

Reputation: 1

null is not an object (evaluating 'this.state.token') React-Native

I'm trying to run a class in a view but i get the following error:

null is not an object (evaluating 'this.state.token')

This is the class that im trying to render:

class BackEnd extends Component{
render() {
  if (this.state.token) {
    return (
    <ListView dataSource={this.state.users}
            renderRow={this.renderUsers}
            style={styles.listView} />
  );
  } else {
  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>
        Mobil
      </Text>
      <TextInput
        style={styles.textInput}
        onChangeText={(username) => this.setState({'username': username})}
        value= {this.state.username}
      />
      <TextInput
        secureTextEntry={true}
        style={styles.textInput}
        onChangeText={(password) => this.setState({'password': password})}
        value={this.state.password}
      />
      <TouchableHighlight style={styles.button} onPress={ () => this.getToken(config.client_id, config.client_key, this.state.username, this.state.password)}>
        <Text>Login</Text>
      </TouchableHighlight>
      <Text style={styles.error}>
        {this.state.error}
      </Text>
    </View>
  )};
}
}

I got the following code in my Component:

export default class AwesomeProject extends Component {

constructor(props, context) {
super(props, context)
this.tabarRef = null
this.state = {
  tab: 'item1',
  text: '',
  selected2: 'key1',
  color: 'red',
  mode: Picker.MODE_DIALOG,
  token: '',
  username: '',
  password: '',
  error: '',
  users: new ListView.DataSource(
    { rowHasChanged: (row1, row2) => row1 !== row2, }
  ),
};
// this.getToken() = this.getToken().bind(this)
}  


componentDidMount() {
  this.loadInitialState().done();
}

async loadInitialState() {
try {
let token = await AsyncStorage.getItem('token');
if (token !== null) {
 this.setState({ token: token });
 this.getData(this.state.token);
} else {
 this.setState({ 'error': 'LogIn' })
}

} catch (error) {

  }
}

async getToken (client_id, client_key, username, password) {

  var data = new FormData();
  data.append('grant_type', 'password');
  data.append('client_id', client_id);
  data.append('client_secret', client_key);
  data.append('username', username);
  data.append('password', password);

    let response = await fetch('https://localhost:8000/o/applications/1/', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Origin': '',
          'Host': 'your-domain.com',
   },
        body: data
      });
      let responseJson = await response.json();
      if (responseJson.hasOwnProperty('error')) {
        this.setState({'error': responseJson.error});
      } else {
      AsyncStorage.setItem('token', responseJson.access_token);
      this.setState({'token': responseJson.access_token});
      this.getData(this.state.token);
    }
  }

async getData(token) {

  let response = await fetch('https://localhost:8000/o/applications/1/',
                          {
                            method: 'GET',
                            headers: {
                              'Accept': 'application/json',
                              'Authorization': 'Bearer '+token,
                              'Host': 'your-domain.com',
                            },
                          }
                        );
  let responseJson = await response.json();
  if (responseJson.hasOwnProperty('detail')) {
    this.setState({'error': responseJson.detail});
  } else {
    this.setState({'user': this.state.users.cloneWithRows(responseJson)});
  }

}

I call the BackEnd class like this in my render function:

  case 'item2':
    content = 
        <View>
         <BackEnd/>
         <Text style={styles.instructions}> Hier komt het 
(school)rooster</Text>
        </View>
    break

stacktrace:

null is not an object (evaluating 'this.state.token') render C:\Users\Mansur\Documents\AwesomeProject\src\Smartplanner.js:64:21 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:1045:14 measureLifeCyclePerf C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:85:11 _renderValidatedComponentWithoutOwnerOrContext C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:1045:8 _renderValidatedComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:1075:10 performInitialMount C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:484:24 mountComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:346:40 mountComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:62:6 updateChildren C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactChildReconciler.js:157:10 _reconcilerUpdateChildren C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactMultiChild.js:212:10 _updateChildren C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactMultiChild.js:345:6 updateChildren C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactMultiChild.js:331:25 receiveComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\native\ReactNativeBaseComponent.js:130:24 receiveComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:163:38 _updateRenderedComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:982:8 _performComponentUpdate C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:944:34 updateComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:847:8 receiveComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:710:6 receiveComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:163:38 updateChildren C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactChildReconciler.js:143:10 _reconcilerUpdateChildren C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactMultiChild.js:212:10 _updateChildren C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactMultiChild.js:345:6 updateChildren C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactMultiChild.js:331:25 receiveComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\native\ReactNativeBaseComponent.js:130:24 receiveComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:163:38 _updateRenderedComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:982:8 _performComponentUpdate C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:944:34 updateComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:847:8 receiveComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:710:6 receiveComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:163:38 updateChildren C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactChildReconciler.js:143:10 _reconcilerUpdateChildren C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactMultiChild.js:212:10 _updateChildren C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactMultiChild.js:345:6 updateChildren C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactMultiChild.js:331:25 receiveComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\native\ReactNativeBaseComponent.js:130:24 receiveComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:163:38 _updateRenderedComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:982:8 _performComponentUpdate C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:944:34 updateComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:847:8 receiveComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:710:6 receiveComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:163:38 _updateRenderedComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:982:8 _performComponentUpdate C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:944:34 updateComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:847:8 receiveComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:710:6 receiveComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:163:38 _updateRenderedComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:982:8 _performComponentUpdate C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:944:34 updateComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:847:8 receiveComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:710:6 receiveComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:163:38 _updateRenderedComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:982:8 _performComponentUpdate C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:944:34 updateComponent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:847:8 performUpdateIfNecessary C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:735:8 performUpdateIfNecessary C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:213:46 runBatchedUpdates C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactUpdates.js:171:6 perform C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\utils\Transaction.js:149:24 perform C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\utils\Transaction.js:149:24 perform C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactUpdates.js:96:8 flushBatchedUpdates C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactUpdates.js:199:26 closeAll C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\utils\Transaction.js:222:29 perform C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\utils\Transaction.js:163:24 batchedUpdates C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactDefaultBatchingStrategy.js:65:33 batchedUpdates C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactUpdates.js:111:41 _receiveRootNodeIDEvent C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\native\ReactNativeEventEmitter.js:126:32 receiveTouches C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\Renderer\src\renderers\native\ReactNativeEventEmitter.js:213:8 __callFunction C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:242:47 C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:26 guard C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:46:4 callFunctionReturnFlushedQueue C:\Users\Mansur\Documents\AwesomeProject\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:107:10

How can i solve this problem?

Upvotes: 0

Views: 1228

Answers (1)

Meysam Izadmehr
Meysam Izadmehr

Reputation: 3262

Move state in the component level to the state in the constructor.

Upvotes: 0

Related Questions