React setState not updating state

Question

So I have this   let total   newDealersDeckTotal reduce function a  b      return a   b     0    console log total   tittal      outputs correct total setTimeout      gt      this setState  dealersOverallTotal  total       10    console log this state dealersOverallTotal   dealersOverallTotal1      outputs incorrect total   newDealersDeckTotal is just an array of numbers  1  5  9  e g  however this state dealersOverallTotal does not give the correct total but total does  I even put in a timeout delay to see if this solved the problem  any obvious or should I post more code

User · Answer

setState is asynchronous  You can use callback method to get updated state   changeHandler event        this setState   yourName  event target value         gt       console log this state yourName

User · Answer

In case of hooks  you should use useEffect hook   const  fruit  setFruit    useState       setFruit  Apple     useEffect      gt      console log  Fruit   fruit       fruit

User · Answer

Using async await  async changeHandler event        await this setState   yourName  event target value         console log this state yourName

User · Answer

The setstate is asynchronous in react  so to see the updated state in console use the callback as shown below  Callback function will execute after the setstate update   The below method is  quot not recommended quot  but for understanding  if you mutate state directly you can see the updated state in the next line  I repeat this is  quot not recommended quot

User · Answer

setState   is usually asynchronous  which means that at the time you console log the state  it s not updated yet  Try putting the log in the callback of the setState   method  It is executed after the state change is complete   this setState   dealersOverallTotal  total         gt      console log this state dealersOverallTotal   dealersOverallTotal1

User · Answer

I had the same situation with some convoluted code  and nothing from the existing suggestions worked for me   My problem was that setState was happening from callback func  issued by one of the components  And my suspicious is that the call was occurring synchronously  which prevented setState from setting state at all   Simply put I have something like this   render          lt Control         ref      gt  this control              onChange  this handleChange          onUpdated  this handleUpdate    gt     handleChange         this control doUpdate       handleUpdate         this setState             The way I had to  fix  it was to put doUpdate   into setTimeout like this   handleChange         setTimeout      gt    this control doUpdate       10       Not ideal  but otherwise it would be a significant refactoring

User · Answer

just add componentDidUpdate     method in your code  and it will work  you can check the life cycle of react native here   https   images app goo gl BVRAi4ea2P4LchqJ8

User · Answer

I had an issue when setting react state multiple times  it always used default state   Following this react github issue worked for me  const  state  setState    useState     foo   abc     bar  123         Do this  setState prevState   gt      return          prevState      foo   def           setState prevState   gt      return          prevState      bar  456

User · Answer

As well as noting the asynchronous nature of setState  be aware that you may have competing event handlers  one doing the state change you want and the other immediately undoing it again  For example onClick on a component whose parent also handles the onClick  Check by adding trace  Prevent this by using e stopPropagation

User · Answer

The setState   operation is asynchronous and hence your console log   will be executed before the setState   mutates the values and hence you see the result   To solve it  log the value in the callback function of setState    like   setTimeout      gt        this setState  dealersOverallTotal  total       function           console log this state dealersOverallTotal   dealersOverallTotal1               10

[javascript] React setState not updating state

Examples related to javascript

Examples related to reactjs

Examples related to state

Examples related to setstate