Why can't I store the array of objects in a State: React JS

Question

React JS component:

Here I make a request to the backend to retrieve some data stored in mysql table. It returns the row as array of objects. So, I store them in a state favcoin. When I console.log(favcoin) , it just shows me and empty array [ ] like this. But if I console.log(response.data) it shows the result correctly.

import Axios from 'axios'
import { useEffect,useState } from 'react'

const Favourite=()=> {
const [favcoin,setFavcoin]=useState([])

//Getting all the favorites

  useEffect(() => {
    Axios.post('http://localhost:9000/getFav',
    { userid : localStorage.getItem('userid') }
      ).then(
        (response)=>{
          setFavcoin(response.data)
          console.log(favcoin)
       }
    )
  }, [])
return (
    
)
}
export default Favourite;

Here's my piece of backend code (node js) where I connect to, from the react component

//Getting all Favorites of user
app.post('/getFav',(req,res)=>{

const user=req.body.userid;
db.query(`select * from favorite where userid=?;`,[user],(err,result)=>{
        res.send(result);
})
})

I am clueless. I am stuck at this point. Actually I have stored array of objects before in state from APIs. But now for some reason I can't. Any help is appreciated. Thank you

useState setters are asynchronous. You won't see the updated value until the next render. — robinsax, Dec 25 '20 at 05:30

score -1 · Answer 1 · answered Dec 25 '20 at 05:33

-1

i think Your code is right. so by the time you calling console log the value is not ready yet, beacuse useState works asynchronously. but that wont be a issue if you show that data in the html

Basically, react does not change the state immediately, see useState set method not reflecting change immediately

If you want to see that the state is really changed, try to render favcoin,

... return (
        <div>{JSON.stringify(favcoin)}</div>
    )

or you can use chrome react dev tools aswell

answered Dec 25 '20 at 05:33

yasith rangana

196
2
12

Thank you! I am a beginner with React and node. I didn't know how they worked. This helped me :D – sudhanva shankara.m Dec 25 '20 at 05:38
This answer is misleading, asynchronous nature is not the culprit here, it's the stale closure of the useState callback https://stackoverflow.com/a/54069332/8155208 – Sudhanshu Kumar Dec 25 '20 at 05:40
Here's the sandbox to understand it better https://codesandbox.io/s/r74cp – Sudhanshu Kumar Dec 25 '20 at 05:41
That made sense. So, if I want to update my state on every render I can do it like useEffect(( )=>{ },[statename] ) right? – sudhanva shankara.m Dec 25 '20 at 05:56

score -2 · Accepted Answer · answered Dec 25 '20 at 05:29

Because setState is asynchronous. You need to console log your state value outside of the useEffect, like this,

import Axios from 'axios'
import { useEffect,useState } from 'react'

const Favourite=()=> {
const [favcoin,setFavcoin]=useState([])

//Getting all the favorites

  useEffect(() => {
    Axios.post('http://localhost:9000/getFav',
    { userid : localStorage.getItem('userid') }
      ).then(
        (response)=>{
          setFavcoin(response.data)
       }
    )
  }, []);

console.log(favcoin);

return (
    <span>{JSON.stringify(favcoin)}</span>
)
}

export default Favourite;

Read my comment on the other answer – Sudhanshu Kumar Dec 25 '20 at 05:43 — Sudhanshu Kumar, Dec 25 '20 at 05:43

Why can't I store the array of objects in a State: React JS

2 Answers2