React Native异步函数异常：导航后才执行请求的问题排查与解决

原始代码 #

const update=async()=>{
        
        setUpdatedUser({
          ...updatedUser,
          userType:user?.userType,
          hostStatus:(user?.userType=='host')?true:false,
          verificationStatus:false
        })
        await actors.userActor?.updateUserInfo(updatedUser).then(async(res)=>{
            console.log(res)
            alert('processing')
            alert(`Your profile is updated ${updatedUser?.firstName} !`)
            await actors.userActor?.getUserInfo().then((res)=>{
                dispatch(setUser(res[0]))
                console.log("response user",res[0])
                setEditProfile(false)
            })
        })
        console.log("request user",updatedUser)
    }

问题原因 #

1. React setState异步特性导致参数错误
   React的setUpdatedUser是异步更新状态的，你调用它后立刻使用updatedUser，此时拿到的还是旧值，导致updateUserInfo传入的参数不符合预期，后端可能无法正确处理请求，使得请求处于pending状态，直到组件卸载（导航到其他页面）时才触发后续回调。

2. 混合使用await与then导致流程混乱
   异步函数中同时用await和嵌套then，会打乱执行顺序，且没有错误捕获逻辑，请求失败时的错误会被静默吞掉，无法及时发现问题。

3. 组件可能在请求完成前卸载
   如果点击按钮的同时触发了页面导航，组件会提前卸载，React会忽略组件卸载后的状态更新（比如setEditProfile），但请求完成后的alert是全局操作，依然会弹出，造成“导航后才执行”的错觉。

解决步骤 #

1. 先创建新用户对象，避免依赖异步状态更新
   直接生成要更新的用户对象，再传入接口调用，绕开setState的异步延迟：

   const newUpdatedUser = {
     ...updatedUser,
     userType: user?.userType,
     hostStatus: user?.userType === 'host',
     verificationStatus: false
   };
   setUpdatedUser(newUpdatedUser);
   // 用新对象调用接口，而非依赖updatedUser状态
   await actors.userActor?.updateUserInfo(newUpdatedUser);
   

2. 统一使用await，添加错误捕获
   去掉then嵌套，用try/catch捕获所有异常，便于排查问题：

   const update = async () => {
     try {
       const newUpdatedUser = {
         ...updatedUser,
         userType: user?.userType,
         hostStatus: user?.userType === 'host',
         verificationStatus: false
       };
       setUpdatedUser(newUpdatedUser);
   
       const updateRes = await actors.userActor?.updateUserInfo(newUpdatedUser);
       console.log(updateRes);
       alert('processing');
       alert(`Your profile is updated ${newUpdatedUser.firstName}!`);
   
       const userRes = await actors.userActor?.getUserInfo();
       dispatch(setUser(userRes[0]));
       console.log("response user", userRes[0]);
       setEditProfile(false);
   
       console.log("request user", newUpdatedUser);
     } catch (error) {
       console.error('Update failed:', error);
       alert('Profile update failed, please try again');
     }
   };
   

3. 确保组件在请求完成前不卸载
   如果按钮绑定了导航逻辑，要等待update函数执行完成后再触发导航，或者阻止按钮的默认跳转行为：

   // 示例：按钮点击事件中先执行update，再导航
   const handleButtonClick = async () => {
     await update();
     // 执行导航逻辑
     navigate('/other-page');
   };
   

4. 验证接口的Promise实现
   确认actors.userActor.updateUserInfo和getUserInfo都正确返回Promise，后端响应成功时resolve，失败时reject，避免await一直处于等待状态。

内容的提问来源于stack exchange，提问作者Atharav Bhatnagar