React中如何实现单次点击触发函数同步顺序执行

问题根因 #

直接在mainfunc中按顺序写func1()、func2()无法满足要求，核心原因是func1内部包含异步逻辑（Redux异步action、接口请求、状态更新等），JavaScript事件循环机制会让同步注册的func2在func1异步逻辑执行完成前就提前触发。

实现思路 #

把func1改造成返回Promise对象的函数，所有内部逻辑（含异步操作）全部执行完成后再标记Promise为成功状态，在mainfunc中等待func1的Promise状态变更后，再调用func2即可。

推荐写法：async/await 控制顺序 #

代码可读性最高，适配绝大多数React+Redux项目场景：

import React from 'react';
import { useDispatch } from 'react-redux';
// 业务组件示例
export default function ActionButton() {
  const dispatch = useDispatch();
  const func1 = () => {
    // 核心：返回Promise，所有逻辑执行完再resolve
    return new Promise((resolve) => {
      // 示例：dispatch redux-thunk 异步action，等接口返回、store更新完成
      dispatch(fetchUserInfo()).then(() => {
        // 这里可以放func1的所有后续同步操作
        console.log('func1全流程执行完成');
        resolve();
      });
    });
  };
  const func2 = () => {
    // 这里可以安全获取func1执行后更新的Redux状态、DOM状态
    console.log('func2开始执行');
  };
  const mainfunc = async () => {
    // 等待func1全部执行完毕
    await func1();
    // 再触发func2
    func2();
  };
  return <button onClick={mainfunc}>单次点击触发顺序执行</button>;
}

如果使用的是redux-thunk，只要thunk函数内部返回Promise，dispatch(thunkAction())本身就会返回Promise实例，可以直接await，不需要额外手动包裹Promise层，示例：

// redux-thunk action示例
const fetchUserInfo = () => async (dispatch) => {
  const res = await fetch('/api/user');
  const data = await res.json();
  dispatch(updateUserInfo(data));
  // thunk返回值会被dispatch透传
  return data;
};
// 组件内func1可以直接简化为
const func1 = () => dispatch(fetchUserInfo());

兼容写法：Promise 链式调用 #

如果项目构建环境不支持async/await语法，可以直接用Promise的then链式调用实现，效果完全一致：

const mainfunc = () => {
  func1().then(() => {
    func2();
  });
};

避坑提示 #

• 不要用固定时长的setTimeout延迟调用func2，异步操作耗时受网络、设备性能影响不可控，会出现偶发顺序错乱
• 如果使用redux-saga，需要配合action监听、状态更新判断等方式确认func1逻辑执行到预期节点后再resolve，不要直接在dispatch后立刻结束Promise

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