使用useEffect实现条件渲染与栈导航时AsyncStorage读取滞后怎么解决？

• 语法疏漏：boarding为"true"的判断分支缺失return关键字，即使状态取值正确也无法正常渲染首页路由
• 执行顺序错位：useEffect钩子的默认执行时机是组件首次渲染完成后，而AsyncStorage读取是异步操作，首次渲染时boarding还是初始空值，必然进入else分支
• 多余性能损耗：useEffect未指定依赖数组，每次组件重渲染都会重复触发AsyncStorage读取操作

新增加载状态标记，在AsyncStorage读取完成前渲染加载占位视图，避免路由判断逻辑提前执行，同时修正语法问题、补充useEffect依赖数组，修改后代码如下：

import { ActivityIndicator, View } from 'react-native';

export default function App() {
  const [boarding, setBoarding] = useState("");
  // 标记AsyncStorage读取是否完成
  const [isLoading, setIsLoading] = useState(true);

  const getData = async () => {
    try {
      const value = await AsyncStorage.getItem("@storage_Key");
      if (value !== null) {
        setBoarding(value);
      }
    } catch (e) {
      // 可根据业务需求补充异常处理逻辑
    } finally {
      // 无论读取成功/失败，都标记加载流程结束
      setIsLoading(false);
    }
  };

  // 空依赖数组保证仅组件挂载时执行一次读取逻辑
  useEffect(() => {
    getData();
  }, []);

  // 加载过程中渲染占位视图，不初始化导航
  if (isLoading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  // 加载完成后再初始化导航容器，初始路由按读取结果判断
  return (
    <NavigationContainer>
      <MainStackNavigator
        initialRoute={boarding === "true" ? "Home" : "Onboarding"}
      />
    </NavigationContainer>
  );
}

该方案可以保证AsyncStorage读取逻辑执行完成后才会加载任何页面，不会出现引导页闪跳首页的问题。

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