React Native Redux异步Action请求未完成返回空状态如何解决

问题根因 #

你遇到的问题是两个常见的Redux Thunk + React Hooks使用误区导致的：

1. 你写的getMemberEmail thunk没有返回Promise，await dispatch(...)实际没有等待异步请求执行完成就向下运行了
2. 同一渲染周期内useSelector获取的state是固定的闭包值，哪怕dispatch已经完成了state更新，当前函数内的旧变量也不会刷新，要等组件重渲染后才能拿到新值

你看到的第三次点击才打印出正确结果完全是时序巧合：前两次点击触发的请求在第三次点击执行时刚好完成，更新了state，第三次打印时才拿到了更新后的值，和点击次数无关。

修复步骤 #

第一步：修改action代码，让thunk返回Promise #

把getMemberEmail里的异步操作全部返回，确保dispatch调用后能拿到完整的Promise链：

export const getMemberEmail = (emailParam) => {
    return (dispatch) => {
        // 返回fetch的Promise
        return fetch(API_URL + "/query-email", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                email: emailParam
            })
        })
        .then((res) => {
            if (res.ok) {
                // 返回res.json的Promise
                return res.json()
            } else {
                throw new Error("Unable to fetch")
            }
        })
        .then((emailCheck) => {
            dispatch({
                type: GET_MEMBER_EMAIL,
                payload: emailCheck
            });
            // 把结果返回，方便组件直接获取
            return emailCheck
        })
        .catch((err) => {
            console.log(err);
            throw err
        });
    };
};

第二步：组件侧获取最新结果（两种方案二选一即可） #

方案1：直接获取请求返回的结果（无需等待重渲染，适合拿到结果立刻做逻辑校验的场景）

修改checkEMail方法，直接拿await返回的请求结果使用：

const checkEMail = async () => {
  try {
    // dispatch返回的Promise会resolve我们在thunk最后return的emailCheck结果
    const emailCheckResult = await dispatch(getMemberEmail(email));
    console.log('接口返回的最新数据：', emailCheckResult);
    // 后续校验、跳转等逻辑直接用emailCheckResult即可
  } catch (err) {
    // 处理请求错误逻辑
  }
};

方案2：用useEffect监听state变化（适合需要和视图渲染绑定的场景）

如果你需要用到的逻辑必须等组件重渲染后执行，可以用useEffect监听memberEmailCheck的变化：

// 组件内新增useEffect
useEffect(() => {
  // 确认是请求返回的有效数据后再执行逻辑
  if (memberEmailCheck.length > 0) {
    console.log('state更新后的最新数据：', memberEmailCheck);
    // 后续逻辑写在这里
  }
}, [memberEmailCheck])

内容的提问来源于stack exchange，提问作者Eres Keanu Carreon