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

【问题标题】：Invalid hook call. Hooks can only be called inside of the body of a function component. How to solve this issue?无效的挂钩调用。钩子只能在函数组件的主体内部调用。如何解决这个问题？
【发布时间】：2020-09-15 16:16:42
【问题描述】：

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

所以会看到这一点，我在类组件中使用此代码解构了 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: 'dhruvash2u@gmail.com',
  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"
        />
        <ScrollView>
          <ProfileTab data={dummyText} imagePress={this.onImagePress} />
          <RoundButtonArray btnArray={btnArray} />
          <Spacer/>
          <FlatButton name="Log Out" onClick={this.onSignOut}/>
          
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default Profile;
// <SignOutBtn onSignOut={this.onSignOut} />

【问题讨论】：

嗯，错误告诉你你的钩子不在函数内部，你只能在函数组件内部调用钩子，基于类的组件不能与钩子一起使用，所以你需要将它转换为函数组件以避免该错误。

标签： javascript reactjs react-native

【解决方案1】：

就像在 cmets 中提到的那样，您将不得不将基于类的组件转换为函数式组件，

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>
    );
};

【讨论】：