如果我已经保存了更改，我应该如何在返回时避免未保存更改的“警报”？

如何解决如果我已经保存了更改，我应该如何在返回时避免未保存更改的“警报”？

如果我已经通过为此目的创建的按钮保存了更改，我应该如何避免在返回上一屏幕时出现“未保存更改警报”？

我创建了两个页面来说明我遇到的问题：主页和第二页。通过主页我可以转到第二页，但是如果我将数据保存在第二页中，无论如何都会出现警告“放弃更改”。

首页（homeTest）

import React from 'react';
import { View,StyleSheet,Button } from 'react-native';

const homeTest = ({ navigation }) => {
    return (
        <View style={styles.containerStyle}>
            <Button styles={styles.button}
                title="GO TO SECOND PAGE"
                onPress={() => navigation.navigate('Second page')}
            />
        </View>
    )
};

const styles = StyleSheet.create({
    containerStyle: {
        flex: 1,justifyContent: 'center',alignItems: 'center',},button: {
        fontSize: 24,color: "black",textAlign: 'center',marginBottom: 20,width: '100%',borderRadius:20,txtInput: {
        textTransform: 'capitalize',top:3,paddingHorizontal: 20,}
});
  
export default homeTest;

第二页（secondPageTest）

import React,{ useState } from 'react';
import { View,Button,Alert } from 'react-native';
import { TextInput,} from 'react-native-paper';
import AsyncStorage from '@react-native-async-storage/async-storage';

const secondPageTest = ({ navigation }) => {
    
    const [name,setName] = useState('');
    const [age,setAge] = useState('');
    const [flagModify,setFlagModify] = useState(false);
    const hasUnsavedChanges = Boolean(flagModify);

    const checkAndSave = async (keyToSave,varName,varage) => {
        if (varName == '' || varage == '') {
            Alert.alert ("Attention","You must complete the fields!");
            return;
        }

        let fields = {
            name: varName,age: varage 
        };

        try {
            await AsyncStorage.setItem(keyToSave,JSON.stringify(fields));
        } catch(e) {
            console.warn("Error.");
            return;
        }
        console.warn("The data has been saved !. However the unsaved changes alert appear.");
        setFlagModify(false);
        navigation.navigate('Home page');
    };

    const updateField = (fieldValue,fieldName) => {
        setFlagModify(true);
        switch (fieldName) {
            case 'fName':
                return setName(fieldValue);
            case 'fAge':
                return setAge(fieldValue);
            default:
                return; 
        }
    };

    React.useEffect(() => {

        navigation.addListener('beforeRemove',(e) => {
            const action = e.data.action;
            if (!hasUnsavedChanges) {
              return;
            }
    
            e.preventDefault();
    
            Alert.alert(
              'discard changes?','You have unsaved changes. Are you sure to discard them and leave the screen?',[
                { text: "Don't leave",style: 'cancel',onPress: () => {} },{
                  text: 'discard',style: 'destructive',onPress: () => navigation.dispatch(action),]
            );
        })
    },[hasUnsavedChanges,navigation]);
    
    return (
        <>
            <View>
                <TextInput style={styles.txtInput}
                    label="name"
                    onChangeText={(value) => updateField(value,'fName')}
                />
                <TextInput style={styles.txtInput}
                    label="age"
                    onChangeText={(value) => updateField(value,'fAge')}
                />
                <Button styles={styles.button}
                    title="SAVE DATA"
                    onPress={() => checkAndSave('keySample',name,age)}
                />
                <Button styles={styles.button}
                    title="CANCEL"
                    onPress={() => navigation.navigate('Home page')} 
                />
            </View>

        </>
    )
};

const styles = StyleSheet.create({
    button: {
        fontSize: 24,}
});
  
export default secondPageTest;

解决方法

您应该在按下丢弃按钮时将 hasUnsavedChanges 更改为 false。

const hasUnsavedChanges = useMemo(()=>{
 return Boolean(text)
},[text])

Alert.alert(
  'Discard changes?','You have unsaved changes. Are you sure to discard them and leave the screen?',[
    { text: "Don't leave",style: 'cancel',onPress: () => {} },{
      text: 'Discard',style: 'destructive',onPress: () => {
        setText("");
        navigation.dispatch(action)
      },},]
);