React Native类组件如何访问Context？调用Hook出现无效报错怎么解决

你收到「无效Hook调用」报错的核心原因是：React Hook 只能在函数组件或自定义Hook的顶层调用，不能在类组件中直接使用，你当前的MyEventsScreen是类组件，直接调用自定义Hook useAuthState 不符合Hook的使用规则。

方案1：将类组件改造为函数组件（推荐） #

当前React生态更推荐函数组件写法，改造后可以直接使用你定义的自定义Hook，改造后的MyEventsScreen代码示例：

import { useAuthState } from "../contexts/authContext";
import { View, Text } from 'react-native';

export default function MyEventsScreen() {
  // 可正常调用Hook获取认证状态
  const authState = useAuthState();

  return (
    <View>
      <Text>当前用户邮箱：{authState.email}</Text>
    </View>
  );
}

该方案改动量最小，也符合目前主流的React开发规范。

方案2：保留类组件，使用Context.Consumer读取上下文 #

如果需要保留类组件的写法，可以直接导出Context实例，通过Consumer的方式在类组件中读取状态：

1. 首先修改authContext.js，新增导出两个Context实例：

// 原有代码全部保留，新增以下导出
export { AuthProvider, useAuthState, useAuthDispatch, AuthStateContext, AuthDispatchContext };

2. 改造MyEventsScreen类组件代码：

import { Component } from 'react';
import { View, Text } from 'react-native';
import { AuthStateContext, AuthDispatchContext } from "../contexts/authContext";

export default class MyEventsScreen extends Component {
  render() {
    return (
      <AuthStateContext.Consumer>
        {/* 此处获取到的authState就是认证状态 */}
        {authState => (
          <AuthDispatchContext.Consumer>
            {/* 此处获取到的authDispatch就是派发action的方法 */}
            {authDispatch => (
              <View>
                <Text>当前用户邮箱：{authState.email}</Text>
                <Text onPress={() => authDispatch({type: 'SIGN_IN', email: 'test@demo.com', token: 'test_token'})}>
                  模拟登录
                </Text>
              </View>
            )}
          </AuthDispatchContext.Consumer>
        )}
      </AuthStateContext.Consumer>
    )
  }
}

如果只需要使用认证状态不需要派发更新，只保留AuthStateContext.Consumer嵌套即可。

方案3：高阶组件封装（适合多类组件复用场景） #

如果有多个类组件都需要使用AuthContext，可以封装一个高阶组件，把状态和dispatch通过props注入到类组件中，避免重复写Consumer嵌套：

1. 在authContext.js中新增高阶组件定义：

export function withAuth(Component) {
  return function WrappedComponent(props) {
    const authState = useAuthState();
    const authDispatch = useAuthDispatch();
    return <Component {...props} authState={authState} authDispatch={authDispatch} />
  }
}

2. 在MyEventsScreen中使用高阶组件：

import { Component } from 'react';
import { View, Text } from 'react-native';
import { withAuth } from "../contexts/authContext";

class MyEventsScreen extends Component {
  render() {
    // 直接从props中读取认证状态和dispatch方法
    const { authState, authDispatch } = this.props;
    return (
      <View>
        <Text>当前用户邮箱：{authState.email}</Text>
      </View>
    )
  }
}

// 用高阶组件包裹后导出
export default withAuth(MyEventsScreen);

注意：无论使用哪种方案，都需要确保MyEventsScreen的父级组件已经用AuthProvider进行了包裹，否则上下文无法正常获取。

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