javascript - 我想在 useEffect 中使用异步函数，但它不起作用

Question

这是我的业余项目，我想使用一个返回用户数据的异步函数。 所以我在 useEffect 之外声明了 async 函数，并尝试在 async 函数中 setState。

当我在 then block 中使用 console.log res 时，它会显示我预期的结果，但是当我在异步 getData 函数之外使用 console.log 时，它不会工作

为什么 setUsersData(setState) 不能按我的预期工作？

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])

Answer 1

useEffect 回调不能是async，但您可以在内部声明一个自执行的异步函数。

另外，请注意，不要将 promise 语法与 async/await 语法一起使用。

 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])