React Native: this.setState is not a function

Question

I see a number of questions on here relating to this same issue, but it seems none match the issue I\'m having, and are a bit more complex.

I am in the process of le

Answer 1

The issue is context binding, as identified in the other comments and answers here.

However, the performance of bind itself is a non-issue. The way-more-relevant issue is that using bind or arrows in your render methods creates a new function on each render, resulting in a change of props for the child that receives them, forcing a re-render.

You have two viable options:

class WeatherProject extends Component {
  constructor(props) {
    super(props);

    this._handleTextChange = this._handleTextChange.bind(this);
  }
  // ...
}

Or you can use the class property notation and assign arrow functions if you're using the babel plugin for it.

class WeatherProject extends Component {
  constructor(props) {
    super(props);
    // ...
  }

  handleTextChange = (event) => {
    this.setState({zip: event.nativeEvent.text});
  }
  // ...
}

I strongly recommend you use the eslint package with the react recommended rules enabled. It will catch errors like using bind/arrows in your render, as well as tell you that underscore prefixed functions are ugly and totally not necessary in React. :)

Answer 2

I had the same problem when trying to set the state. when I bind the function inside the constructor, the issue gets solved. check with below binding

 constructor(props) {
    super(props);
    this.state = {
      zip: "",
      forecast: null
    };

   this._handleTextChange = this._handleTextChange.bind(this);

  }

Answer 3

Do not use bind inside a render. bind is a rather expensive operation and should only happen once. you have two options:

either bind the function in the constructor:

this._handleTextChange = this._handleTextChange.bind(this);

or use arrow function:

onSubmitEditing={(e) => this._handleTextChange(e)} />

Edit

Apparently arrow functions inside render is also a bad practice (Thx to Adam Terlson in the comments and answer below). You can read eslint docs which states:

A bind call or arrow function in a JSX prop will create a brand new function on every single render. This is bad for performance, as it will result in the garbage collector being invoked way more than is necessary.

Using arrow functions is obviously not as bad as using bind, but nevertheless should be avoided.

Answer 4

Regarding arrow function you also need to change _handleTextChange(event) function. Other answers didn't talk about how to change normal function to arrow function. So providing as an answer which may help others

You need to change handler function

from

_handleTextChange(event) {
    this.setState({zip: event.nativeEvent.text});
  }

To

_handleTextChange = event => {
   this.setState({zip: event.nativeEvent.text});
 }

Answer 5

this.setState is not a function--- Solved using this

 let that = this;

 that.setState({membersArray:response.data})