Cant able to set value using useState hook? Why this happens?

Question

const [userDetail, setUserDetail] = useState([])

useEffect(() => {
    getUsersData()
}, [])

const getUsersData = async () => {
    const userResp = await MyService.getInstance().getEntities()

    let data = []
    console.log(userResp)

    if (userResp) {
        userResp.map((d) => {
            data.push({
                name: d.name,
                username: d.username
            })
        })
        
        setUserDetail(data) // < --------this line--------
        console.log(data)
    }

    console.log(userDetail)
}

setUserDetail doesnt set the value for userDetail Array even console.log(userDetail) shows empty array. like this:

`setUserDetail` doesn't mean any assignment to `userDetail` until the next time `useState` is invoked; `console.log(userDetail)` is *before* that. — jonrsharpe, Jan 04 '21 at 16:12
Reading `state` right after calling `setState()` is a potential pitfall. — Camilo, Jan 04 '21 at 16:16
@jonrsharpe ok so how should i get rid of that because i was doing this mistake everytime ? — Ram Aravind, Jan 04 '21 at 17:45
Only `console.log(userDetail)` immediately after `useState`, when it's got the new value. — jonrsharpe, Jan 04 '21 at 17:47

score 0 · Accepted Answer · answered Jan 04 '21 at 17:45

Two things:

You are using the .map method as .forEach. The purpose of the .map method is to return a new array transformed. Then, this data array is not necessary.If you want to transform an array, you can use a map, but is not necessary to create a new array. Map will return the new array transformed.

  const[ userDetail , setUserDetail ] = useState([])

  useEffect( () => {
    getUsersData()
  }, [])

  const getUsersData = async() =>{
    const userResp = await MyService.getInstance().getEntities()
    console.log(userResp)
    if(userResp){
     setUserDetail(
     userResp.map((d) => (
        {
          name:d.name,
          username:d.username
        })
     ))
    }
  }

 console.log(userDetail)

Try to move your console.log outside the method getUsersData. Then you will see all values for userDetail after each render.

Cant able to set value using useState hook? Why this happens?

1 Answers1