setState not setting state variable React

Question

I'm trying to set state variable to response data from api call but unable to do so . I have division array in responseJson which i'm trying to set to divisions array in state. I'm getting the responseJson values on console.log but when i'm trying setState({...this.state,divisions:responseJson.division}) i'm not getting any data on console.

state

    this.state={
    token: data.token,
    role: data.role,
    userId: data.userId,
    organizationId: data.organizationId,
    organizationName: data.organization_name,
    workspacePP: false,
    workspaces: [],
    divisions:[],
    addWorkspace: null,
    isDivisionViewable:false,
    divisionName:null

};

function addDivision

 addDivision=()=> {

 const uri = `${APPURL}/workspace/division/create`;
 console.log('dddddd',this.state)
  fetch(uri, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${this.state.token}`
    },
    body: JSON.stringify({
              workspace_id: this.state.workspaces[0].workspace_id,
              organization_id: this.state.organizationId,
              division:this.state.divisionName
        }),
    }).then((res)=>res.json()).then(responseJson=>{

          if(!responseJson.status){
            message.error(responseJson.error);
            return;
          }
          console.log('dddd',responseJson);

          this.setState({...this.state,divisions:responseJson.division})

    })
    console.log(this.state)//returns empty array
  }

responseJson

{status: true, division: Array(1), created_at: {…}, user: {…}}
created_at:
updated_at: ["2019-03-09 14:05:26"]
__proto__: Object
division: Array(1)
0: {id: 5, userid: "t863060h", workspace_id: "ROPHV6W", workspace_name: 
"workspace", created_at: "2019-03-09 13:39:31", …}
length: 1
__proto__: Array(0)
status: true
user:
created_at: "2019-03-08 18:29:56"
email: "[email protected]"
email_verification: 1
id: 1
loginStatus: 0
mobile_otp: 0
mobile_verification: 0
phone: "9632587410"
role: "Admin"
slug: ""
status: 2
team: null
uid: null

updated_at: "2019-03-08 18:29:56" userid: "t863060h" username: "tryy catchh"

console.log(this.state)

nName: "tryCatchh", …}
addWorkspace: true
divisionName: "dud"
**divisions**: Array(0)//no data
length: 0
__proto__: Array(0)
isDivisionViewable: true
organizationId: "finalids"
organizationName: "tryCatchh"
role: "Admin"
userId: "t863060h"
workspacePP: false
workspaces: [{…}]

other funtction

  showDivision=()=>{
        console.log('dddd',this.state.divisions);
  }

Hemadri Dasari · Accepted Answer · 2019-03-09 08:51:11Z

3

SetState is asynchronous so To see updated state value you need to

Change

this.setState({...this.state,divisions:responseJson.division})

To

  this.setState({
       divisions:responseJson.division
  }, () => {
        console.log(this.state.divisions);//here you will get updated divisions state value
   });

answered Mar 9, 2019 at 8:51

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mike3096 Over a year ago

@Hemadari Dasari Thanks for the answer it works for me now

Mike3096 Over a year ago

@Hemadari Dasari i tried to use this divisions variable in other function by this.state.divisions but it returned null.

Hemadri Dasari Over a year ago

It won’t be able in other functions until the component is rendered

Mike3096 Over a year ago

@ Hemadri Dasar I have edited the post can you check once

Tubc · Accepted Answer · 2019-03-09 08:55:09Z

2

Notice your setState is in then function, and will run after the API call response. Your console.log(this.state) will run immediately after calling the API.

if you want to see the final state after the API call, pass a callback func as the second parameter to setState like this:

this.setState({ divisions:responseJson.division }, () => console.log(this.state))

note: you don't need to destructure the state when calling setState, React does it for you already.

answered Mar 9, 2019 at 8:55

Tubc

4164 silver badges21 bronze badges

5 Comments

Mike3096 Over a year ago

thanks for the answer ... now i tried to use this divisions variable in other function by this.state.divisions but it returned null

Tubc Over a year ago

the problem is when you use it. can you share the code?

Tubc Over a year ago

@Mike3096 when do you call showDivision? it will be the same if you call that function immediately after api call, the response isn't there yet. and what is your use case

Mike3096 Over a year ago

my case is i have to use divisions in render function

Tubc Over a year ago

render function should be re-run when the state change, and will have the latest data. if it's still not working can you create a sample in codesandbox I can have a look

Collectives™ on Stack Overflow

setState not setting state variable React

2 Answers 2

4 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related