如何在组件渲染前从AsyncStorage更新状态？

首先需要明确：AsyncStorage的操作是异步IO，无法在组件首次同步渲染前完成数据获取。因此核心思路是先处理加载状态，等异步操作完成后再渲染目标页面，或者在更高层级组件提前完成数据获取，确保子组件渲染时已有可用数据。以下是具体实现方案：

方案1：组件内结合加载状态处理 #

在组件内部通过useEffect异步获取数据，同时维护一个加载状态，在数据未就绪时显示加载UI，就绪后根据条件渲染对应页面：

import { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { View, ActivityIndicator } from 'react-native';

function TargetPage() {
  const [condition, setCondition] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchCondition = async () => {
      try {
        // 从AsyncStorage获取存储的条件
        const storedValue = await AsyncStorage.getItem('target_condition');
        // 若存储的是JSON格式数据，需解析
        const parsedCondition = storedValue ? JSON.parse(storedValue) : false;
        setCondition(parsedCondition);
      } catch (err) {
        console.error('获取条件失败:', err);
        // 出错时设置默认值
        setCondition(false);
      } finally {
        // 无论成功失败，结束加载状态
        setIsLoading(false);
      }
    };

    fetchCondition();
  }, []);

  // 加载中显示加载组件
  if (isLoading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" color="#0000ff" />
      </View>
    );
  }

  // 根据条件渲染对应页面
  return condition ? <PageA /> : <PageB />;
}

方案2：根组件提前获取数据并传递 #

如果多个组件需要使用该条件，可以在App根组件初始化时完成数据获取，通过props或Context传递给子组件，避免重复请求：

// App.js
import { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import TargetPage from './TargetPage';
import { View, ActivityIndicator } from 'react-native';

function App() {
  const [globalCondition, setGlobalCondition] = useState(null);
  const [isAppLoading, setIsAppLoading] = useState(true);

  useEffect(() => {
    const fetchInitialData = async () => {
      try {
        const storedValue = await AsyncStorage.getItem('target_condition');
        setGlobalCondition(storedValue ? JSON.parse(storedValue) : false);
      } catch (err) {
        console.error('初始化数据失败:', err);
        setGlobalCondition(false);
      } finally {
        setIsAppLoading(false);
      }
    };

    fetchInitialData();
  }, []);

  if (isAppLoading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" color="#0000ff" />
      </View>
    );
  }

  return <TargetPage condition={globalCondition} />;
}

// TargetPage.js
function TargetPage({ condition }) {
  // 直接使用传递过来的条件渲染，无需再次请求
  return condition ? <PageA /> : <PageB />;
}

方案3：封装自定义Hook复用逻辑 #

将AsyncStorage的获取逻辑封装成自定义Hook，方便在多个组件中复用：

import { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

function useAsyncStorage(key, defaultValue = null) {
  const [value, setValue] = useState(defaultValue);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchValue = async () => {
      try {
        const storedValue = await AsyncStorage.getItem(key);
        setValue(storedValue ? JSON.parse(storedValue) : defaultValue);
      } catch (err) {
        setError(err);
        setValue(defaultValue);
      } finally {
        setIsLoading(false);
      }
    };

    fetchValue();
  }, [key, defaultValue]);

  return { value, isLoading, error };
}

// 使用示例
function TargetPage() {
  const { value: condition, isLoading, error } = useAsyncStorage('target_condition', false);

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

  if (error) {
    return <Text>加载失败，请重试</Text>;
  }

  return condition ? <PageA /> : <PageB />;
}

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