React Native+Redux场景下如何让API调用等待返回所需数据后执行后续逻辑

根因 #

你遇到的问题本质是异步逻辑时序问题：checkEmail是基于Redux Thunk实现的异步请求逻辑，你调用后没有等待请求完成就直接判断emailExists的值，此时请求尚未返回，Redux状态还停留在初始的null，判断逻辑永远拿不到最新结果。同时你原来的代码漏了将checkEmail传给dispatch执行，直接调用checkEmail只会返回一个函数，不会真正发起网络请求。

可行解决方案 #

下面提供三种常用的实现方案，按需选择即可：

方案1：异步等待请求完成后判断 #

给registerUser加上async/await，等待异步请求完成后再从Redux中取最新的emailExists判断：

// 注册逻辑加async修饰
const registerUser = async (values, actions) => {
  // 必须通过dispatch执行thunk action，同时await等待请求完成
  await dispatch(checkEmail(values.userEmail));
  // 从Redux取更新后的emailExists，此处也可以直接用useSelector绑定的变量
  const emailExists = useSelector(state => state.yourReducerKey.emailExists);
  if (emailExists) {            
     toastRef.current.show("Email already exists!");
     return;
  }
  // 后续正常注册逻辑
}

方案2：直接在请求回调中处理提示逻辑 #

把toast提示逻辑放到checkEmail的请求回调里，不用在注册逻辑中额外判断，代码更简洁：

// 修改checkEmail，新增toastRef参数
function checkEmail(data, toastRef) {
  return (dispatch) => {
    return api_request
      .post("register/check/email", { email: data })
      .then((res) => {
        const exists = res.data.exists;
        dispatch(emailExists(exists));
        if (exists) {
          dispatch(authError("Email already exists"));
          // 满足条件直接弹出提示
          toastRef?.current?.show("Email already exists!");
        }
      })
      .catch((err) => {
        console.log(`err`, err);
      });
  };
}

// 调用时传入toastRef即可
const registerUser = (values, actions) => {
  dispatch(checkEmail(values.userEmail, toastRef));
}

方案3：监听Redux状态变化触发提示 #

如果多个业务场景都需要用到邮箱存在校验，可以在组件中监听emailExists的变化自动触发提示：

// 组件内先通过useSelector绑定Redux中的emailExists状态
const emailExists = useSelector(state => state.yourReducerKey.emailExists);

// 新增useEffect监听状态变化
useEffect(() => {
  if (emailExists) {
    toastRef.current.show("Email already exists!");
    // 提示完成后重置状态，避免后续重复触发
    dispatch(emailExists(null));
  }
}, [emailExists, dispatch])

// 注册逻辑无需额外处理判断
const registerUser = (values, actions) => {
  dispatch(checkEmail(values.userEmail));
}

注意事项 #

所有异步操作的后续逻辑，必须满足以下任意一个条件才能拿到正确的结果：

• 用async/await等待异步操作执行完成再处理
• 将后续逻辑放到异步操作的回调函数中执行
• 监听异步操作更新的状态变化，触发对应逻辑

内容的提问来源于stack exchange，提问作者Mir Stephen