React Native中AsyncStorage.getItem调用时函数重复执行问题求助

你的代码存在几个核心问题，导致函数多次执行且输出异常：

1. React Hooks使用错误：useState 只能在React组件或自定义Hook（命名需以use开头）中调用，你把它放在普通函数keyFetch里，违反了Hook规则，会导致状态管理混乱。
2. 未声明的全局变量fetched：fetched没有用let/const声明，会变成全局变量，多次调用时状态逻辑完全失效。
3. 重复执行异步操作：每次组件渲染调用keyFetch时，都会重新执行getKey()发起异步请求，加上状态更新触发的组件重渲染，就会导致多次执行和异常输出。

修复后的自定义Hook实现 #

把keyFetch改成符合规则的自定义Hook，用useEffect控制异步操作只执行一次：

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

// 自定义Hook必须以use开头
function useScheduleKey() {
    const [value, setValue] = useState(null);
    const [isLoading, setIsLoading] = useState(true);
    const [error, setError] = useState(null);

    const getKey = async () => {
        try {
            const key = await AsyncStorage.getItem('scheduleKey');
            setValue(key);
        } catch (err) {
            setError("指定的key不存在");
            console.log("指定的key不存在");
        } finally {
            setIsLoading(false);
        }
    };

    // useEffect依赖项为空数组，确保只在组件挂载时执行一次
    useEffect(() => {
        getKey();
    }, []);

    // 返回状态、加载状态和错误信息，供组件使用
    return { value, isLoading, error };
}

export default useScheduleKey;

在组件中正确使用 #

在组件里调用自定义Hook，根据状态处理输出和视图渲染：

const Hem = () => {
    const { value, isLoading, error } = useScheduleKey();

    // 只在加载完成后打印有效数据
    useEffect(() => {
        if (!isLoading) {
            console.log("获取到的key值：", value);
        }
    }, [value, isLoading]);

    if (isLoading) {
        return <Text>加载中...</Text>;
    }

    if (error) {
        return <Text>{error}</Text>;
    }

    return <Text>获取到的key：{value}</Text>;
};

为什么这样能解决问题 #

• 自定义Hook遵循React规则，状态管理稳定，不会因为重复调用函数而创建新的状态实例。
• useEffect的空依赖数组确保异步获取操作只在组件挂载时执行一次，避免重复请求。
• 通过isLoading状态明确区分加载阶段，不会输出无意义的undefined，也能给用户加载反馈。

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