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

Question

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

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

首页（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,
        justifyContent: 'center',
        alignItems: 'center',
        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, StyleSheet, 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,
        justifyContent: 'center',
        alignItems: 'center',
        color: "black",
        textAlign: 'center',
        marginBottom: 20,
        width: '100%',
        borderRadius:20,
    },
    txtInput: {
        textTransform: 'capitalize',
        top:3,
        paddingHorizontal: 20,
    }
});
  
export default secondPageTest;

Answer 1

按下丢弃按钮时，您应该将 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)
      },
    },
  ]
);