I’m new in React and I’m trying to write an app working with an API. I keep getting this error:
TypeError: this.setState is not a function
when I try to handle the API response. I suspect it’s something wrong with this binding but I can’t figure out how to fix it. Here’s the code of my component:
var AppMain = React.createClass({
getInitialState: function() {
return{
FirstName: " "
};
},
componentDidMount:function(){
VK.init(function(){
console.info("API initialisation successful");
VK.api('users.get',{fields: 'photo_50'},function(data){
if(data.response){
this.setState({ //the error happens here
FirstName: data.response[0].first_name
});
console.info(this.state.FirstName);
}
});
}, function(){
console.info("API initialisation failed");
}, '5.34');
},
render:function(){
return (
<div className="appMain">
<Header />
</div>
);
}
});Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
The callback is made in a different context. You need to bind to this in order to have access inside the callback:
VK.api('users.get',{fields: 'photo_50'},function(data){
if(data.response){
this.setState({ //the error happens here
FirstName: data.response[0].first_name
});
console.info(this.state.FirstName);
}
}.bind(this));EDIT:
Looks like you have to bind both the init and api calls:
VK.init(function(){
console.info("API initialisation successful");
VK.api('users.get',{fields: 'photo_50'},function(data){
if(data.response){
this.setState({ //the error happens here
FirstName: data.response[0].first_name
});
console.info(this.state.FirstName);
}
}.bind(this));
}.bind(this), function(){
console.info("API initialisation failed");
}, '5.34');Method 2
You can avoid the need for .bind(this) with an ES6 arrow function.
VK.api('users.get',{fields: 'photo_50'},(data) => {
if(data.response){
this.setState({ //the error happens here
FirstName: data.response[0].first_name
});
console.info(this.state.FirstName);
}
});Method 3
React recommends bind this in all methods that needs to use this of class instead this of self function.
constructor(props) {
super(props)
this.onClick = this.onClick.bind(this)
}
onClick () {
this.setState({...})
}Or you may to use arrow function instead.
Method 4
you could also save a reference to this before you invoke the api method:
componentDidMount:function(){
var that = this;
VK.init(function(){
console.info("API initialisation successful");
VK.api('users.get',{fields: 'photo_50'},function(data){
if(data.response){
that.setState({ //the error happens here
FirstName: data.response[0].first_name
});
console.info(that.state.FirstName);
}
});
}, function(){
console.info("API initialisation failed");
}, '5.34');
},Method 5
You just need to bind your event
for ex-
// place this code to your constructor
this._handleDelete = this._handleDelete.bind(this);
// and your setState function will work perfectly
_handleDelete(id){
this.state.list.splice(id, 1);
this.setState({ list: this.state.list });
// this.setState({list: list});
}Method 6
use arrow functions, as arrow functions point to parent scope and this will be available.
(substitute of bind technique)
Method 7
Now ES6 have arrow function it really helpful if you really confuse with bind(this) expression you can try arrow function
This is how I do.
componentWillMount() {
ListApi.getList()
.then(JsonList => this.setState({ List: JsonList }));
}
//Above method equalent to this...
componentWillMount() {
ListApi.getList()
.then(function (JsonList) {
this.setState({ List: JsonList });
}.bind(this));
}Method 8
You no need to assign this to a local variable if you use arrow function. Arrow functions takes binding automatically and you can stay away with scope related issues.
Below code explains how to use arrow function in different scenarios
componentDidMount = () => {
VK.init(() => {
console.info("API initialisation successful");
VK.api('users.get',{fields: 'photo_50'},(data) => {
if(data.response){
that.setState({ //this available here and you can do setState
FirstName: data.response[0].first_name
});
console.info(that.state.FirstName);
}
});
}, () => {
console.info("API initialisation failed");
}, '5.34');
},Method 9
Now in react with es6/7 you can bind function to current context with arrow function like this, make request and resolve promises like this :
listMovies = async () => {
const request = await VK.api('users.get',{fields: 'photo_50'});
const data = await request.json()
if (data) {
this.setState({movies: data})
}
}With this method you can easily call this function in the componentDidMount and wait the data before render your html in your render function.
I don’t know the size of your project but I personally advise against using the current state of the component to manipulate datas.
You should use external state like Redux or Flux or something else for that.
Method 10
Here THIS context is getting changed. Use arrow function to keep context of React class.
VK.init(() => {
console.info("API initialisation successful");
VK.api('users.get',{fields: 'photo_50'},(data) => {
if(data.response){
this.setState({ //the error happens here
FirstName: data.response[0].first_name
});
console.info(this.state.FirstName);
}
});
}, function(){
console.info("API initialisation failed");
}, '5.34');Method 11
I have the same error of
TypeError: setState is not a function
but the cause is silly. Posting it as a response here to hopefully save people who might be making the same mistake.
Instead of
const { state, setState } = React.useState(false);
Use
const [ state, setState ] = React.useState(false);
Square brackets and not curly brackets!
Method 12
If you’re doing this and still having an issue, my problem is I was calling two variables the same name.
I had companies as an object brought in from Firebase, and then was trying to call this.setState({companies: companies}) – it wasn’t working for obvious reasons.
Method 13
Use from arrow function to handle action.
Method 14
This is mainly incompatibility problem between react, react-dom, and enzyme.
Try install the following as I did to solve the problem:
[...]
"react": "^18.0.0-beta-f320ef88f-20211116",
"react-dom": "16.14.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6"
[...]
Method 15
In my case, the problem was that I was sending the state and setstate as props to a child component but there was a typo in setstate
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0