React中useEffect内使用async函数时setState不生效的问题

安全阿岳

2026-8-22

问题解答

核心原因：React状态更新的异步性

你遇到的不是setUsersData没生效，而是React的useState更新是异步的。调用setUsersData(res.data)后，组件的usersData不会立刻变成新值，React会把这次更新加入队列，等到当前渲染周期结束后再批量更新状态并重新渲染组件。

你看到的console.log('usersData:', usersData)打印undefined，是组件第一次初始渲染时的状态（因为useState未设置初始值，默认是undefined）。当异步请求完成、setUsersData触发状态更新后，组件会重新渲染，此时依赖usersData的useEffect会再次执行，就能打印出更新后的真实数据——你可以检查控制台，应该会有两次打印：第一次是undefined，第二次是请求回来的用户数据。

代码写法优化建议

你的代码同时混用了await和.then()，属于冗余写法还触发了eslint警告，建议改成更清晰的async/await+try/catch结构，同时加上错误处理，避免请求失败时无反馈：

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

  const getData = useCallback(async () => {
    try {
      // 直接用await接收请求结果，无需嵌套then
      const res = await Goodlogging.inquireFeed()
      console.log(res.data)
      setUsersData(res.data)
    } catch (error) {
      // 处理请求失败的情况
      console.error('获取用户数据失败:', error)
      // 可选：设置默认值或提示用户
      // setUsersData([])
    }
  }, [])

  useEffect(() => {
    console.log('usersData:', usersData)
  }, [usersData])

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

  // 组件其他渲染逻辑...
}