iOS端useEffect中导航函数已调用但未跳转问题求助

问题详情 #

当API返回404（用户未创建个人资料）时，需从页面A跳转至创建个人资料页面。目前已在catch块捕获404，终端日志显示导航函数已被调用，但iOS首次渲染时跳转不生效，仅刷新应用后正常，Android端无此问题。

现有代码 #

useEffect 逻辑

useEffect(() => {
  const isUserCreatedProfile = async (loggedInUserInfo) => {
    try {
      await axios
        .get(`${baseUrl}/api/user/profile?email=${loggedInUserInfo?.email}`, {
          headers: apiHeaders,
        })
        .then((res) => {
         // 其他业务逻辑
          
        })
        .catch((err) => {
          componentErrorHandler("home", "isUserCreatedProfile[axios]", err);
          if (err?.response?.status === 404) {
            console.log("err got", err?.response?.status);
            navigateToCreateProfile(
              loggedInUserInfo["custom:Name"],
              loggedInUserInfo?.email,
            );
            console.log("err got here");
          }
          console.log("err got here 2");
          setLoading(false);
        });
    } catch (err) {
      componentErrorHandler("home", "isUserCreatedProfile", err);
    }
  };
  if (userInfo?.data) {
    isUserCreatedProfile(userInfo?.data);
  }
}, [
  chatData?.connected,
  connectUserChat,
  navigateToCreateProfile,
  navigation,
  setUserInfo,
  token?.accessToken,
  userInfo,
  userLocationSave,
]);

导航函数

const navigateToCreateProfile = useCallback(
  (name, email) => {
    console.log("called navigation");
    navigation.replace("CreateProfile", {
      name,
      email,
    });
  },
  [navigation],
);

终端日志

LOG  home isUserCreatedProfile[axios] [AxiosError: Request failed with status code 404]
LOG  err got 404
LOG  called navigation
LOG  err got here
LOG  err got here 2

解决方法 #

1. 延迟导航执行适配iOS渲染时序 #

iOS首次渲染时导航栈可能未完全初始化，通过setTimeout延迟执行可规避该问题：

if (err?.response?.status === 404) {
  console.log("err got", err?.response?.status);
  // 延迟100ms执行导航，给iOS足够时间初始化导航栈
  setTimeout(() => {
    navigateToCreateProfile(
      loggedInUserInfo["custom:Name"],
      loggedInUserInfo?.email,
    );
  }, 100);
  console.log("err got here");
}

2. 等待UI交互完成后执行导航 #

使用React Native的InteractionManager，确保当前渲染任务完成后再触发导航：

import { InteractionManager } from 'react-native';

// ...

if (err?.response?.status === 404) {
  console.log("err got", err?.response?.status);
  InteractionManager.runAfterInteractions(() => {
    navigateToCreateProfile(
      loggedInUserInfo["custom:Name"],
      loggedInUserInfo?.email,
    );
  });
  console.log("err got here");
}

3. 统一异步逻辑处理方式 #

原代码混用async/await与.then/.catch可能导致执行顺序异常，改用纯try/catch处理：

const isUserCreatedProfile = async (loggedInUserInfo) => {
  try {
    const res = await axios.get(`${baseUrl}/api/user/profile?email=${loggedInUserInfo?.email}`, {
      headers: apiHeaders,
    });
    // 其他业务逻辑
  } catch (err) {
    componentErrorHandler("home", "isUserCreatedProfile[axios]", err);
    if (err?.response?.status === 404) {
      console.log("err got", err?.response?.status);
      InteractionManager.runAfterInteractions(() => {
        navigateToCreateProfile(
          loggedInUserInfo["custom:Name"],
          loggedInUserInfo?.email,
        );
      });
      console.log("err got here");
    }
    console.log("err got here 2");
    setLoading(false);
  }
};

4. 添加导航状态标记避免重复触发 #

useEffect依赖数组包含userInfo，若其多次更新可能覆盖导航操作，添加状态标记防止重复执行：

const [hasNavigated, setHasNavigated] = useState(false);

useEffect(() => {
  const isUserCreatedProfile = async (loggedInUserInfo) => {
    if (hasNavigated) return; // 已完成导航则直接返回
    try {
      const res = await axios.get(`${baseUrl}/api/user/profile?email=${loggedInUserInfo?.email}`, {
        headers: apiHeaders,
      });
      // 其他业务逻辑
    } catch (err) {
      componentErrorHandler("home", "isUserCreatedProfile[axios]", err);
      if (err?.response?.status === 404) {
        console.log("err got", err?.response?.status);
        setHasNavigated(true); // 标记导航已执行
        InteractionManager.runAfterInteractions(() => {
          navigateToCreateProfile(
            loggedInUserInfo["custom:Name"],
            loggedInUserInfo?.email,
          );
        });
        console.log("err got here");
      }
      console.log("err got here 2");
      setLoading(false);
    }
  };
  if (userInfo?.data && !hasNavigated) {
    isUserCreatedProfile(userInfo?.data);
  }
}, [
  chatData?.connected,
  connectUserChat,
  navigateToCreateProfile,
  navigation,
  setUserInfo,
  token?.accessToken,
  userInfo,
  userLocationSave,
  hasNavigated
]);

内容的提问来源于stack exchange，提问作者Harsh Mishra