React Native初始渲染时SetState不生效问题求助

核心问题 #

1. 依赖拼写错误：useEffect依赖数组里写了fisrtLaunch（正确应为firstLaunch），导致state更新后无法触发useEffect重新执行。
2. 初始直接触发错误重定向：组件挂载时firstLaunch和authenticated初始值都是null，此时会直接进入else分支跳转至unAuthStack，后续异步请求完成更新state后，页面已跳转无法响应新状态。
3. 无加载状态处理：未处理异步请求的加载阶段，导致初始渲染直接进入错误分支。

修复步骤 #

1. 修正依赖拼写 #

把useEffect依赖数组里的fisrtLaunch改为firstLaunch，确保state变化能正确触发副作用。

2. 添加加载状态 #

新增isLoading状态，在异步请求未完成时显示加载内容，避免初始错误跳转。

3. 合并异步逻辑 #

用Promise.all并行处理两个异步请求，减少等待时间，确保所有初始化数据就绪后再处理重定向。

修复后完整代码 #

import React, { useState, useEffect } from "react";
import { isAuthenticated, firstTimeLaunch } from "Services/Auth";
import { Redirect } from "expo-router";
import { ActivityIndicator, View } from "react-native";

const Home = () => {
  const [authenticated, setAuthenticated] = useState(null);
  const [firstLaunch, setFirstLaunch] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const initApp = async () => {
      const [launchStatus, authStatus] = await Promise.all([
        firstTimeLaunch(),
        isAuthenticated()
      ]);
      setFirstLaunch(launchStatus);
      setAuthenticated(authStatus);
      setIsLoading(false);
    };

    initApp();
  }, []);

  if (isLoading) {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  if (firstLaunch) {
    return <Redirect href="onBoarding" />;
  } else if (authenticated) {
    return <Redirect href="authStackTabs" />;
  } else {
    return <Redirect href="unAuthStack" />;
  }
};

export default Home;

额外说明 #

• 并行请求两个接口能减少启动阶段的等待时间，提升用户体验。
• 加载状态确保只有所有初始化数据就绪后，才会执行重定向逻辑，避免初始错误跳转。
• 空依赖数组保证初始化逻辑只在组件挂载时执行一次，避免重复触发。

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