我有一个表单，当我提交时，它应该一个一个地调用 2 个函数，然后运行一个依赖于提到的 2 个函数的条件。
当你按下按钮时处理程序启动，但是你如何确保它们会按顺序运行并等待上一个的结果？
const handlerNextPage = () => {
controlValidInputs();
handlerSetValues();
inputsData.pages.isValid.page1 && navigate("step2");
};
谢谢
【问题讨论】：
标签： reactjs react-redux
这取决于您的函数的性质以及您在其中执行的操作。 如果它们执行所有同步任务，它们会被顺序调用，并且会一个接一个地顺序执行，这是由于 JavaScript 引擎 Event Loop 的同步单线程特性造成的。
但是
如果您在其中一个函数中执行一些异步任务，例如 http fetch 或 setTimout，则将执行下一个函数，而前一个异步操作尚未执行。要处理这些情况，您需要使用 Promise。
在您的情况下，我认为您在第一个函数 controlValidInputs() 中没有任何异步任务，而在第二个函数中，我假设您正在执行一些 React setState，React setState 是异步的，但不能用 Promise 处理，您需要使用 useEffect 挂钩在反应状态更新后延迟操作。
【讨论】：
如果它们是 synchronous 函数，那么您不必担心它们会一一运行，但如果您设置 state 即 asynchronous 或在函数中调用 API，我认为这不是案例在这里。但是，如果您仍然在函数中调用 API，您可以通过将函数转换为异步函数并放入 await 来轻松处理，但是如果您 setstate 并使用它正确的值，那就是棘手的部分，因为 setState 几乎不需要设置它之前的一点时间，所以你需要稍微更新你的逻辑假设handlerSetValues();你setState在这个函数中是这样的：
const handlerSetValues = () => {
// code here
// code here
// get value of state
setState(value) // this take little bit time so
return value // as well and use it handlerNextPage function
}
const handlerNextPage = () => {
controlValidInputs();
const value = handlerSetValues();
// now use value as state like you use below code I think.
inputsData.pages.isValid.page1 && navigate("step2");
};
【讨论】：
你可以使用效果
useEffect(()=>{
// inputsData.pages.isValid.page1 && navigate("step2");
},[depency-OnChanging-Which-Call-Code-Inside-Effect])
【讨论】：