React表单handleSubmit中如何让有依赖的异步方法按顺序执行

你的原有代码存在两个核心问题：

• 三个异步方法没有做串行等待逻辑，默认会并行执行，执行顺序不受控制
• React的useState返回的setter方法是异步批量更新的，执行set操作后立刻读取对应state，拿到的还是更新前的旧值，会导致后续依赖这个值的接口请求报错

第一步：优化依赖外部state的工具方法 #

首先修改carregarPlanoCurso，让它接收课程ID作为入参，不要直接依赖异步更新的state，避免取值错误：

// 修改后的carregarPlanoCurso
async function carregarPlanoCurso(cursoId) {
  const response = await api.get(`cursos/${cursoId}/plano`);
  return response.data;
}

第二步：重写handleSubmit为async函数，用await控制执行顺序 #

用await等待前一个异步操作完全完成后再执行下一个，同时直接用同步过滤出来的临时变量做后续逻辑的参数，避开state异步更新的问题：

async function handleSubmit({
  anoLetivo1,
  curso1,
  unidadeCurricular1
}) {
  // 1. 等待学科加载完成
  const disciplinaList = await carregarDisciplinas();
  const filteredDisciplina = disciplinaList.filter(disciplina => disciplina.nome === unidadeCurricular1);
  setResPesquisaDisciplina(filteredDisciplina);

  // 2. 等学科加载完成后，再加载课程
  const cursoList = await carregarCursos();
  const filteredCurso = cursoList.filter(curso => curso.nome === curso1);
  setResPesquisaCurso(filteredCurso);

  // 3. 等课程加载完成后，再加载课程计划，直接传入过滤好的课程ID，无需依赖state
  const planoList = await carregarPlanoCurso(filteredCurso[0].id);
  const filteredPlano = planoList.filter(plano => plano.id_disci === filteredDisciplina[0].id);
  setResPesquisaPlano(filteredPlano);
}

可选优化：增加边界校验 #

建议增加空值判断，避免过滤结果为空时访问下标0的属性报错，比如：

// 过滤后加判断
if (filteredCurso.length === 0) {
  alert('未找到匹配的课程');
  return;
}

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