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

Question

***我已经制作了自定义的 AuthContext，它为 Singnin 和 SignOut 页面进行 API 调用，基本上 AuthContext 中有函数，我想在下面的类组件中调用它们所以会看到我已经在类组件内部使用这段代码对 singOutFunction 进行了解构，代码如下 const {state, signOutFunction, clearMessage}=useContext(AuthContext)请告诉我我做错了什么，并告诉我在类组件中在哪里解构我的 signOutFunctionimport 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() {

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

    const 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 }

        );

    };

    const onImagePress = () => {

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

    };

    return (

        <View style={styles.container}>

            <BackHeader route="Home" title="PROFILE" type="row" backIcon="ios-arrow-dropright" />

            <ScrollView>

                <ProfileTab data={dummyText} imagePress={onImagePress} />

                <RoundButtonArray btnArray={btnArray} />

                <Spacer />

                <FlatButton name="Log Out" onClick={onSignOut} />

            </ScrollView>

        </View>

    );

};