React handlessubmit表单-如何确保handlessubmit方法中的方法只在满足条件时执行

Question

我有一个搜索表单，当提交时，它会触发handlessubmit()函数在handlessubmit()函数中我有3个方法，它们的执行相互依赖，我想要的是确保每个方法在handlessubmit方法中依次执行

我想要的是确保carregarCursos()方法只在carregarDisciplinas()方法执行时执行，carregarPlanoCurso()方法只在carregarCurso()方法执行时执行

function handleSubmit({
anoLetivo1,
curso1,
unidadeCurricular1
}) {
carregarDisciplinas().then((value) => {
setResPesquisaDisciplina(
value.filter((disciplina) => disciplina.nome === unidadeCurricular1)
);
});
carregarCursos().then((value) => {
setResPesquisaCurso(value.filter((curso) => curso.nome === curso1));
});
carregarPlanoCurso().then((value) => {
setResPesquisaPlano(
value.filter((plano) => plano.id_disci === resPesquisaDisciplina[0].id)
);
});
}

方法和变量的声明方式如下:

const [resPesquisaDisciplina, setResPesquisaDisciplina] = useState([]);
const [resPesquisaCurso, setResPesquisaCurso] = useState([]);
const [resPesquisaPlano, setResPesquisaPlano] = useState([]);
async function carregarCursos() {
const response = await api.get('cursos/');
return response.data;
}
async function carregarPlanoCurso() {
const response = await api.get(`cursos/${resPesquisaCurso[0].id}/plano`);
return response.data;
}
async function carregarDisciplinas() {
const response = await api.get('disciplinas/');
return response.data;
}

Answer 1

您可以创建一个异步函数并获取所需的所有数据，如下所示:

async function loadAllData() {
const cursos = await carregarCursos();
const planos = await carregarPlanoCurso();
const diciplinas = await carregarDisciplinas();
return { cursos, planos, diciplinas }
}
loadAllData().then(({ cursos, planos, diciplinas }) => {
//...All the setData functions 
});

Answer 2

我设法解决了useEffect的问题，我使carregarPlanoCurso()方法只在变量resPesquisaCurso改变大小时被调用，useEffect在handleSubmit的范围之外声明:

useEffect(() => {
if (resPesquisaCurso.length !== 0) {
carregarPlanoCurso().then((value) => {
setResPesquisaPlano(
value.filter(
(plano) => plano.id_disci === resPesquisaDisciplina[0].id
)
);
});
}
}, [resPesquisaCurso]);