React Native如何用AsyncStorage数据初始化useState避免null值

原代码的核心问题 #

你直接将异步函数的Promise对象传给了useState，这会导致初始状态是未resolved的Promise，而非预期的字符串值；后续异步获取到值后调用setState，又会触发额外重渲染，引发UI异常。

方案一：useEffect + 加载状态控制 #

通过useEffect在组件挂载时异步读取存储值，同时加入加载状态，避免初始值异常导致的UI问题：

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

const usePostFilterOptions = () => {
    // 初始值设为undefined，配合加载状态区分未初始化状态
    const [postFilterType, setPostFilterType] = useState(undefined);
    const [postModeType, setPostModeType] = useState(undefined);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        const initializeFilters = async () => {
            // 并行读取两个存储项，提升性能
            const [savedFilter, savedMode] = await Promise.all([
                AsyncStorage.getItem('postFilterType'),
                AsyncStorage.getItem('postModeType')
            ]);
            
            setPostFilterType(savedFilter ?? 'trending');
            setPostModeType(savedMode ?? 'home');
            setIsLoading(false);
        };

        initializeFilters();
    }, []);

    const updatePostFilterType = async (type) => {
        await AsyncStorage.setItem('postFilterType', type);
        setPostFilterType(type);
    }

    const updatePostModeType = async (type) => {
        await AsyncStorage.setItem('postModeType', type);
        setPostModeType(type);
    }

    return { 
        postFilterType, 
        updatePostFilterType, 
        postModeType, 
        updatePostModeType,
        isLoading 
    };
};

export default usePostFilterOptions;

使用时可以通过isLoading状态控制UI：

const { postFilterType, isLoading } = usePostFilterOptions();

if (isLoading) {
    return <LoadingPlaceholder />;
}

// 正常渲染逻辑

方案二：useReducer合并状态更新 #

将两个状态合并为一个对象，通过useReducer一次性完成初始化更新，减少重渲染次数：

import { useEffect, useReducer } from "react";
import AsyncStorage from "@react-native-async-storage/async-storage";

const initialState = {
    postFilterType: undefined,
    postModeType: undefined,
    isLoading: true
};

const filterReducer = (state, action) => {
    switch (action.type) {
        case 'INITIALIZE':
            return {
                ...state,
                postFilterType: action.payload.filterType,
                postModeType: action.payload.modeType,
                isLoading: false
            };
        case 'UPDATE_FILTER':
            return { ...state, postFilterType: action.payload };
        case 'UPDATE_MODE':
            return { ...state, postModeType: action.payload };
        default:
            return state;
    }
};

const usePostFilterOptions = () => {
    const [state, dispatch] = useReducer(filterReducer, initialState);

    useEffect(() => {
        const initializeFilters = async () => {
            const [savedFilter, savedMode] = await Promise.all([
                AsyncStorage.getItem('postFilterType'),
                AsyncStorage.getItem('postModeType')
            ]);
            
            dispatch({
                type: 'INITIALIZE',
                payload: {
                    filterType: savedFilter ?? 'trending',
                    modeType: savedMode ?? 'home'
                }
            });
        };

        initializeFilters();
    }, []);

    const updatePostFilterType = async (type) => {
        await AsyncStorage.setItem('postFilterType', type);
        dispatch({ type: 'UPDATE_FILTER', payload: type });
    }

    const updatePostModeType = async (type) => {
        await AsyncStorage.setItem('postModeType', type);
        dispatch({ type: 'UPDATE_MODE', payload: type });
    }

    return { 
        postFilterType: state.postFilterType, 
        updatePostFilterType, 
        postModeType: state.postModeType, 
        updatePostModeType,
        isLoading: state.isLoading
    };
};

export default usePostFilterOptions;

为什么react-cookie的useCookie可以直接用？ #

浏览器的Cookie是同步可读取的（通过document.cookie直接获取），而AsyncStorage是基于异步IO的存储方案，无法同步获取值，这是两者本质的差异，所以useCookie可以直接同步初始化状态，而AsyncStorage必须处理异步逻辑。

需要明确：异步存储的初始化必然会触发一次重渲染（从加载状态到完成状态），我们能做的是通过状态控制将这个过程的影响降到最低。

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