挂钩调用无效。钩子只能在函数组件的主体内部调用。如何解决这个问题？

Question

***我已经制作了自定义的 AuthContext，它为 Singnin 和 SignOut 页面进行 API 调用，基本上 AuthContext 中有函数，我想在下面的类组件中调用它们

所以会看到我已经在类组件内部使用这段代码对 singOutFunction 进行了解构，代码如下 const {state, signOutFunction, clearMessage}=useContext(AuthContext)

请告诉我我做错了什么，并告诉我在类组件中在哪里解构我的 signOutFunction

import React,{useContext} from 'react';

import {View, StyleSheet, ScrollView, ToastAndroid, Alert} from 'react-native';

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

import ProfileTab from './ProfileTab';

import {BackHeader} from '../components/Headers';

import {RoundButtonArray, SignOutBtn} from '../components/Buttons';

import {btnArray} from '../helpers/MapInputs';

import FlatButton from '../components/FlatButton'

import Spacer from '../components/Spacer';

//////////////////////////////////////////////////////////////////////////////////

**import {Context as AuthContext} from '../context/AuthContext'**

const dummyText = {

  name: 'Dhruva H',

  email: '[e-mail]',

  prep: 'CET',

};

class Profile extends React.Component {

const {state, signOutFunction, clearMessage}=useContext(AuthContext)

    

//   signOutPress = async () => {

//     await AsyncStorage.clear();

//     this.props.navigation.navigate('LoadStack');

//     ToastAndroid.show('Signed Out!', ToastAndroid.SHORT);

//   };

  onSignOut = async () => {

   

    

    Alert.alert(

      'Sign out',

      'Are you sure you want to Sign out?',

      [

        {

          text: 'Cancel',

          onPress: () => null,

          style: 'cancel',

        },

        {text: 'OK', onPress: signOutFunction()},

      ],

      {cancelable: true},

    );

  };

  onImagePress = () => {

    ToastAndroid.show('Hi', ToastAndroid.SHORT);

  };

  render() {

   

    return (

      <View style={styles.container}>

        <BackHeader

          route="Home"

          title="PROFILE"

          type="row"

          backIcon="ios-arrow-dropright"

        />

Answer 1

就像评论中提到的那样，您将不得不将基于类的组件转换为功能组件，function Profile() {&nbsp; &nbsp; const { state, signOutFunction, clearMessage } = useContext(AuthContext);&nbsp; &nbsp; const onSignOut = async () => {&nbsp; &nbsp; &nbsp; &nbsp; Alert.alert(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'Sign out',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'Are you sure you want to Sign out?',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: 'Cancel',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onPress: () => null,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style: 'cancel',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'OK', onPress: signOutFunction() },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { cancelable: true }&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; };&nbsp; &nbsp; const onImagePress = () => {&nbsp; &nbsp; &nbsp; &nbsp; ToastAndroid.show('Hi', ToastAndroid.SHORT);&nbsp; &nbsp; };&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <View style={styles.container}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <BackHeader route="Home" title="PROFILE" type="row" backIcon="ios-arrow-dropright" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ScrollView>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ProfileTab data={dummyText} imagePress={onImagePress} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <RoundButtonArray btnArray={btnArray} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Spacer />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <FlatButton name="Log Out" onClick={onSignOut} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ScrollView>&nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; );};