undefined is not a function (evaluating 'this.setstate(

Question

I'm react Native beginner. I have write a code for fech data from API using "axios" npm package. When I run is running properly but when it is get data it is throw error.

undefined is not a function (evaluating 'this.setstate(

I suspect it's something wrong with this binding but I can't figure out how to fix it. Please help me to resolved this error.

Below is my code:

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, ListView} from 'react-native';
import axios from 'axios';

export default class App extends Component {

  constructor(props){
    super(props);
    this.state = {
      isolate: true,
      movies: []
    }

  }

  componentWillMount(){
    axios.get('https://facebook.github.io/react-native/movies.json')
    .then(function (response){
      var moviesList = new ListView.DataSource({
        rowHasChanged: (r1,r2) => r1 !== r2
      });
      this.setState({
        isolate: false,
        movies: moviesList.cloneWithRows(response.data.movies)
      });
    }).catch(function(error){
alert(error);
    });
  }
  render() {
if(this.state.isolate){
  return (<View>

    <Text>Loading....</Text>
  </View>);
}

    return (
      <View style={styles.container}>
        <ListView 
        dataSource={this.state.movies}
        renderRow={
          (rowData) => <Text> {rowData.title} </Text>
        }
        >
        </ListView>
      </View>
    );
  }
}

Thanks in advance.

`then` callback should be an arrow to get lexical this, – Estus Flask Sep 16 '18 at 14:54 — Estus Flask, Sep 16 '18 at 14:54

score 2 · Accepted Answer · answered Sep 16 '18 at 14:57

You should use an arrow function as your callback:

axios.get('https://facebook.github.io/react-native/movies.json')
    .then(response => {
        // ...
    }

For more details, read How to access the correct `this` inside a callback? to understand how this works.

score 1 · Answer 2 · answered Sep 16 '18 at 14:58

Your this context is not known inside of the then from the ajax call. Either you used arrow functions to pass the context of this or you define a variable var self = this right before ajax call and use it in the callback like self.setState...

componentWillMount(){
    axios.get('https://facebook.github.io/react-native/movies.json')
    .then((response) =>{
      var moviesList = new ListView.DataSource({
        rowHasChanged: (r1,r2) => r1 !== r2
      });
      this.setState({
        isolate: false,
        movies: moviesList.cloneWithRows(response.data.movies)
      });
    }).catch(function(error){
alert(error);
    });
  }

score 1 · Answer 3 · answered Sep 16 '18 at 15:01

Regarding your error it happens because you are trying to have access to this in the wrong context. A solution is to use arrow function to bind the right context to the this keyword.
I would also suggest you to fetch data in the componentDidMount lifecycle method so it becomes:

componentDidMount() {
  axios.get('https://facebook.github.io/react-native/movies.json')
    .then(response => {
      var moviesList = new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 !== r2
      });
      this.setState({
        isolate: false,
        movies: moviesList.cloneWithRows(response.data.movies)
      });
    }).catch(function(error) {
      alert(error);
    });
}

undefined is not a function (evaluating 'this.setstate(

3 Answers3