React组件中Context异步函数执行完成后如何执行后续操作

你当前的代码无法实现「等函数执行完再走后续逻辑」的核心原因有两个：

• 你定义的getSpecificTodo虽然是async函数，但内部没有把接口请求的结果返回，外部调用时就算等待，也拿不到请求成功/失败的状态、拿不到返回的todo数据
• React的setState是异步批量更新机制，就算等函数执行完毕，立刻读取Context中的state值，也不一定能拿到刚更新完成的最新状态，不适合在调用侧靠读取state判断后续分支。

第一步：改造Context中的getSpecificTodo方法 #

把原来的then/catch链式调用改成try/catch写法，在请求结束后把执行结果直接return出去，方便外部调用时拿到返回值：

const [state, setState] = useState({
  error: null,
  isTodoLoading: false,
  todo: {},
});

const getSpecificTodo = async (projectID) => {
  setState(ps => ({
    ...ps,
    todo: {},
    error: null,
    isTodoLoading: true,
  }));

  try {
    const res = await API.getTodo(projectID);
    const todoData = res.data;
    setState(ps => ({
      ...ps,
      todo: todoData,
      error: null,
      isTodoLoading: false,
    }));
    // 返回请求成功的结果和数据
    return { success: true, data: todoData };
  } catch (e) {
    const formattedErr = formatError(e, `Failed To Retrieve Project Consent!`);
    setState(ps => ({
      ...ps,
      todo: {},
      error: formattedErr,
      isTodoLoading: false,
    }));
    // 返回请求失败的结果和错误信息
    return { success: false, error: formattedErr };
  }
}

第二步：改造点击事件处理函数 #

给handleOnClick加上async关键字，调用getSpecificTodo时用await等待执行完成，直接拿到返回结果做分支判断即可，不需要依赖Context的state更新：

import { Modal, message } from 'antd';
import { useNavigate } from 'react-router-dom'; // 如果你用react-router做跳转的话

// 组件内
const navigate = useNavigate();
const handleOnClick = async (projectId) => {
  const result = await getSpecificTodo(projectId);

  if (result.success) {
    // 这里的有效数据判断规则可以根据你的接口返回结构调整，比如判断是否存在id、标题等必填字段
    const isValidTodo = result.data && Object.keys(result.data).length > 0;
    if (isValidTodo) {
      // 有有效数据，弹出Modal展示内容
      Modal.info({
        title: '待办事项详情',
        content: <TodoDetail data={result.data} />, // 替换成你自己的待办详情渲染逻辑
      });
    } else {
      // 无有效数据，跳转到指定页面
      navigate('/target-route');
    }
  } else {
    // 请求失败，弹出错误提示
    message.error(result.error.message || '获取待办事项失败');
  }
}

• 不要尝试在await getSpecificTodo之后立刻读取Context中的todo state做判断：React的state更新是批量调度的，await执行完时setState刚触发，还没完成状态同步，此时读state大概率拿到的是旧值。
• 如果你后续需要在其他组件逻辑中监听todo变化做联动，正常用useContext读取state配合useEffect监听即可，本次点击事件的分支判断直接用函数返回值是最简洁、最不容易出问题的写法。
• 如果你的项目没有用react-router，跳转逻辑替换成你项目用的路由方案即可，不影响核心逻辑。

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