2

This is my side project and I'd like to use an async function that returns users data. So I declared the async function outside of useEffect and try to setState in the async function.

when I console.log res in then block, it shows the result I expected but when I console.log outside of async getData function, it won't work

why setUsersData(setState) doesn't work as i expected?

const FeedPage = () => {
  const [usersData, setUsersData] = useState()

  const getData = useCallback(async () => {
    // eslint-disable-next-line promise/always-return
    await Goodlogging.inquireFeed().then((res) => {
    // when i console.log here it returns as i expected...
      console.log(res.data)
      setUsersData(res.data)
    })
  }, [])


  useEffect(() => {
    // try to console.log data but it returns undefined ...
    console.log('usersData:', usersData)
  }, [usersData])

  useEffect(() => {
    getData()
  }, [getData])
BoHyunK
  • 59
  • 6
  • `await Goodlogging.inquireFeed().then((res) => {` should just be `const { data } = await GoodLogging.inquireFeed();`. Don't mix `.then` with `await`. – Jared Smith Aug 18 '22 at 13:51
  • Does this answer your question? [Why does calling react setState method not mutate the state immediately?](https://stackoverflow.com/questions/30782948/why-does-calling-react-setstate-method-not-mutate-the-state-immediately) – Jared Smith Aug 18 '22 at 13:51

1 Answers1

2

The useEffect callback can't be async, but you can declare a self-executable async function inside.

Also, side note, don't use promise syntax with async/await syntax.

 useEffect(() => {
   (async () => {
     const res = await Goodlogging.inquireFeed()
     // when i console.log here it returns as i expected...
     console.log(res.data)
     setUsersData(res.data)

   })()
 }, [getData])
Mina
  • 14,386
  • 3
  • 13
  • 26