Предупреждение о том, что функция не работает в

У меня есть кнопка на моей странице, которая вызывает предупреждение. Если этот пользователь выбирает Yes, я хочу, чтобы функция exit() запускалась. Однако, как он теперь закодирован, почему-то ничего не происходит.

Кто-нибудь знает, что я делаю неправильно?

import React, { Component } from 'react';
import { *****************, AsyncStorage, Button, StatusBar, Text, StyleSheet, View, TextInput, Alert } from 'react-native';

type Props = {};
export default class IDScreen extends Component<props> {

 static navigationOptions = {
 title: 'Identification',
 };

 exit = async () => {
 alert("I should see this but I don't");
 await AsyncStorage.clear();
 this.props.navigation.navigate('Login');
 }

 promptExit() {
 Alert.alert("Are you sure?", "You can't be serious.", [
 {text: 'Yes, Sign out', onPress: async () => this.exit },
 {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
 ],
 { cancelable: true });
 }

 render() {
 return (
 <view>
 <text onpress="{this.promptExit}">Sign Out</text>
 </view>

 );
 }

}
</props>
2 ответа

Вам нужно изменить promptExit() на promptExit =() => функции promptExit =() =>.

Функции стрелок используются, а не переопределяют значение this, внутри их тела, это просто означает то же самое внутри тела функции, что и вне его.

Поскольку функция вызывается без ссылки на конкретный объект, например yourObj.yourMethod(), поэтому вам нужно либо bind его в class constructor/render yourObj.yourMethod() class constructor/render либо использовать arrow function.

Без него он потеряет контекст и всегда будет undefined или global object.

Аналогичным образом вы также можете прочитать

Если не использовать функции стрелок


Попробуйте этот метод, он будет работать

Вызовите функцию Alert.alert() из Button, вместо вызова Inside of another function, она будет работать, просто просмотрите фрагмент кода. И exit - это функция стрелки, которая вызывает this this.exit() вместо this.exit.

import React, { Component } from 'react';
import { 
*****************, 
AsyncStorage, 
Button, 
StatusBar,
Text, 
StyleSheet, 
View, 
TextInput,
Alert } from 'react-native';

type Props = {};
export default class IDScreen extends Component<props> {

 static navigationOptions = {
 title: 'Identification',
 };

 exit = async () => {
 alert("I should see this but I don't");
 await AsyncStorage.clear();
 this.props.navigation.navigate('Login');
 }

 render() {
 return (
 <view>
 <text onpress="{" ()=""> Alert.alert(
 "Are you sure?", "You can't be serious.",
 [
 {text: 'Yes, Sign out', onPress: async () => this.exit() },
 {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), 
 style: 'cancel'},
 ],
 { cancelable: true });
 }

 }>Sign Out</text>
 </view>

 );
 }

}
</props>

licensed under cc by-sa 3.0 with attribution.