React Native中如何在API文件调用AuthContext内的函数？

问题根源 #

useContext是React Hook，必须严格遵循Hook规则：只能在React函数组件或自定义Hook的顶层调用，不能在普通异步函数（比如你写在API/index.js里的oturumKontrol）中使用，这就是触发「Invalid hook call」错误的核心原因。

可行解决方案 #

方案1：将Context函数作为参数传递给API函数 #

在调用oturumKontrol的组件中，先通过useContext拿到test函数，再把它作为参数传入API函数：

1. 组件中的调用逻辑：

import { useContext, useEffect } from 'react';
import { AuthContext } from '../path/to/AuthContext';
import { oturumKontrol } from '../API/index';

const YourComponent = () => {
  const { test } = useContext(AuthContext);

  const handleAuthCheck = async () => {
    // 把test函数作为参数传给oturumKontrol
    await oturumKontrol(test);
  };

  useEffect(() => {
    handleAuthCheck();
  }, []);

  return <>{/* 组件内容 */}</>;
};

2. 修改API/index.js中的函数：

import AsyncStorage from '@react-native-async-storage/async-storage';

export const oturumKontrol = async (testFunction) => {
  // 你的登录状态验证逻辑，比如请求接口获取用户信息
  const userInfo = await fetch('/your-auth-api').then(res => res.json());
  
  // 调用传入的test函数
  testFunction(userInfo);
  
  // 保存到AsyncStorage
  await AsyncStorage.setItem('user', JSON.stringify(userInfo));
  
  // 跳转至Main.js（如果需要在这里跳转，需确保navigation能传入，或者在组件中处理跳转）
};

方案2：将API逻辑封装到自定义Hook中 #

把oturumKontrol的逻辑和Context调用整合到自定义Hook里，这样就能合法使用useContext：

1. 创建自定义Hook（比如useAuthCheck.js）：

import { useContext, useEffect } from 'react';
import { AuthContext } from '../path/to/AuthContext';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useNavigation } from '@react-navigation/native';

export const useAuthCheck = () => {
  const { test } = useContext(AuthContext);
  const navigation = useNavigation();

  const oturumKontrol = async () => {
    // 你的状态验证逻辑
    const userInfo = await fetch('/your-auth-api').then(res => res.json());
    
    // 调用Context中的test函数
    test(userInfo);
    
    // 保存到AsyncStorage
    await AsyncStorage.setItem('user', JSON.stringify(userInfo));
    
    // 跳转至Main.js
    navigation.navigate('Main');
  };

  return { oturumKontrol };
};

2. 在组件中使用这个自定义Hook：

import { useEffect } from 'react';
import { useAuthCheck } from '../path/to/useAuthCheck';

const YourComponent = () => {
  const { oturumKontrol } = useAuthCheck();

  useEffect(() => {
    oturumKontrol();
  }, []);

  return <>{/* 组件内容 */}</>;
};

方案3：抽离状态更新逻辑为独立工具函数 #

如果test函数只是用来处理用户信息并更新Context状态，可以把核心逻辑抽离成独立工具函数，让API函数和Context都能复用：

1. 创建工具函数文件（比如authUtils.js）：

export const processUserInfo = (rawUserInfo) => {
  // 这里写test函数中的用户信息处理逻辑，比如格式化字段、过滤数据等
  return {
    ...rawUserInfo,
    formattedCreateTime: new Date(rawUserInfo.createdAt).toLocaleString()
  };
};

2. 修改AuthContext：

import { createContext, useState } from 'react';
import { processUserInfo } from './authUtils';

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  const test = (rawUserInfo) => {
    const processedInfo = processUserInfo(rawUserInfo);
    setUser(processedInfo);
  };

  return (
    <AuthContext.Provider value={{ user, test }}>
      {children}
    </AuthContext.Provider>
  );
};

3. API函数中使用工具函数，再在组件中更新Context：

// API/index.js
import { processUserInfo } from '../authUtils';
import AsyncStorage from '@react-native-async-storage/async-storage';

export const oturumKontrol = async () => {
  const rawUserInfo = await fetch('/your-auth-api').then(res => res.json());
  const processedInfo = processUserInfo(rawUserInfo);
  
  await AsyncStorage.setItem('user', JSON.stringify(processedInfo));
  
  return processedInfo;
};

// 组件中
import { useContext, useEffect } from 'react';
import { AuthContext } from '../path/to/AuthContext';
import { oturumKontrol } from '../API/index';
import { useNavigation } from '@react-navigation/native';

const YourComponent = () => {
  const { test } = useContext(AuthContext);
  const navigation = useNavigation();

  useEffect(() => {
    const checkAuth = async () => {
      const processedInfo = await oturumKontrol();
      test(processedInfo);
      navigation.navigate('Main');
    };
    checkAuth();
  }, []);

  return <>{/* 组件内容 */}</>;
};

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