Блог

*** Я создал свой собственный AuthContext, который выполняет вызовы API для входа в систему и страницы выхода, в основном внутри AuthContext есть функции, которые я хочу вызвать внутри этого компонента класса ниже

Итак, вы увидите, что я разрушил функцию singOutFunction, используя этот код внутри компонента класса с приведенным ниже кодом const {state, signOutFunction, clearMessage}=useContext(AuthContext)

Пожалуйста, скажите мне, что я делаю не так, а также скажите мне, где деструктировать мою функцию входа в сторону компонента класса

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

Как упоминалось в комментариях, вам придется преобразовать ваш компонент на основе класса в функциональный компонент как таковой,

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