I am having an error while updating my states in react

Question

While trying to update the state from a function and calling the function from componentdidmount lifecycle method, the state doesn't update. But when I try to update the state by calling the function from inside the jsx, it does work. I dont know what is happening

//my state
constructor(){
    super()
    this.state = {
        activepage:'dashboard',
        language:[],
    }
}

//the function I am updating state from
getLanguage = () => {
    axios.get('http://localhost:3001/language')
        .then(function (response) {
            console.log(response.data.language);
            this.setState({
                language:response.data.language
            })
        })
        .catch(function (error) {
            return error;
    });
}

//I am calling function from
componentDidMount(){
    this.getLanguage();
    console.log("state after updating",this.state) //displays an empty array
}

But when I call function getLanguage from inside the jsx it updates the state.

When you update `state`, it doesn't get updated immediately. You can use `setState` callback to see when the state is updated. See this: https://stackoverflow.com/a/50604716/4089357 — Abdullah, Jul 20 '18 at 07:51
you check with react dev tool, instead of console, here, also — M Usman Nadeem, Jul 20 '18 at 07:55

score 0 · Accepted Answer · answered Jul 20 '18 at 07:56

0

update your function with es6 arrow function

.then((response) => {
        console.log(response.data.language);
        this.setState({
            language:response.data.language
        })
    })

answered Jul 20 '18 at 07:56

M Usman Nadeem

415
2
13

@MUsmanNadeem this doesn't make sense, if this is the issue, it shouldn't update in either case (but he said it does update through jsx). – Abdullah Jul 20 '18 at 08:05
It worked. I added a callback and it worked properly – Asim Dahal Jul 20 '18 at 08:05

score 0 · Answer 2 · answered Jul 20 '18 at 09:24

For es6 you can use arrow function

getLanguage = () => {
    axios.get('http://localhost:3001/language')
        .then((response) => {
            console.log(response.data.language);
            this.setState({
                language:response.data.language
            })
        })
        .catch((error) => {
            return error;
        })
    );
}

For es5 you can declare this out of scope axios function

function getLanguage() {
    var self = this;
    axios.get('http://localhost:3001/language')
        .then(function(response) {
            console.log(response.data.language);
            self.setState({
                language:response.data.language
            })
        })
        .catch(function(error) {
            return error;
        })
    );
}

I am having an error while updating my states in react

2 Answers2