React中异步加载State后调用函数无法获取最新State值的问题及解决方案

我在开发React应用的时候碰到了一个头疼的问题：更新homeworks状态后，紧接着调用的函数里拿不到最新的状态值，始终是空数组。下面是详细的问题过程和最终解决办法：

我的代码实现步骤 #

1. 状态声明与初始化 #

首先我用useState声明并初始化了homeworks状态：

const [homeworks, setHomeworks] = useState([])

2. 数据加载逻辑 #

在useEffect钩子中调用fetchHomeworks()函数来加载数据，这个函数会根据classroom_id的不同调用不同的API接口：

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

fetchHomeworks的具体实现：

const fetchHomeworks = async () => {
  try {
    let data
    if (classroom_id === "all") {
      data = await homeworksAPI.findAll()
    } else {
      data = await classroomsAPI.getHomeworks(classroom_id)
    }
    await setHomeworks(data)
    await initMercure()
  } catch (error) {
    console.log(error)
  }
}

3. 问题现象 #

在调用setHomeworks(data)后我立刻调用了initMercure()，但在这个函数里打印homeworks却始终是空数组[]：

const initMercure = async () => {
  console.log("homeworks (initMercure): ", homeworks) // 此处输出始终是空数组[]
}

尝试过的无效方案 #

我试过两种方法，但都没解决问题：

• 尝试用await setHomeworks(data, initMercure())，希望通过回调触发initMercure，没用
• 直接在同一个useEffect里同时调用fetchHomeworks()和initMercure()：useEffect(()=>{ fetchHomeworks(); initMercure() },[])，还是拿不到最新值

最终解决方案 #

后来我换了个思路，通过新增一个监听homeworks状态变化的useEffect钩子，当homeworks数组长度大于0时再调用initMercure()；同时调整了数据加载的useEffect的依赖项，把classroom_id加进去，确保切换班级时能重新加载数据。代码如下：

useEffect(()=>{
  fetchHomeworks()
  fetchClassroom()
},[classroom_id])

useEffect(()=>{
  if (homeworks.length>0) initMercure();
},[homeworks])

这样调整后，initMercure()就能拿到最新的homeworks状态值了，问题顺利解决！

内容的提问来源于stack exchange，提问作者ThomasM