Как очистить состояние в компоненте класса в React Native?

Question

Я новичок ie в React Native и изо всех сил пытаюсь очистить состояние экрана.

Как экран A имеет некоторые состояния -> экран B, обратно к экрану A, старые состояния очищаются. Я использую React Navigation V5

Я пытаюсь сделать следующее:

1. После перехода от MainMap.js к последнему экрану TripsListScreen.js (весь процесс Стек из 4 экранов, вложенных в ящик), я получил все данные, хранящиеся в хранилище Redux, и отобразил их в TripsListScreen.
2. Проблема в том, что я нажимаю кнопку add в TripsListScreen чтобы вернуться к MainMap.js, он не очищает все состояния, как я ожидаю.

Вот состояния MainMap.js:

const initialState = {
    hasMapPermission: false,
    _userLocationDisplayed: null,
    userLatitude: 0,
    userLongitude: 0,
    initial_UserLatitude: 0,
    initial_UserLongitude: 0,
    userLocationAddress: '',

    destination: [],
    destinationName: [],
    destinationAddress: [],
    destinationCoords: [],
    destinationImageUri: [],

    numOfInput:[0,1],
    counter: 1,
    wayPoints: [],
    markers: [],
}

class MainMap extends React.Component{

    constructor(props){
        super(props);

        this.state = initialState;


    };


    componentDidMount(){
        console.log('Hello',this.props)
        if(this.props.route.params === true){
            this.setState(initialState)
        }
        this._requestUserLocation();
    };

По сути, я пытался передать логический параметр от TripsListScreen до MainMap, и если параметр верен, я верну все состояния обратно в начало. Однако он не работает должным образом.

Вот TripsListScreen:

//...
<Layout style={styles.bottom}>
      <TouchableOpacity onPress={() => props.navigation.navigate('PlanningProcess', {
            screen: 'MainMapScreen',
            params: {doAddPlace: true}
      })} style={styles.createTrip}>
          <Layout style={styles.button} >
               <Icon name='add' size={35} />
          </Layout>
      </TouchableOpacity>
</Layout>
//...

Вот Навигация :

1. StackNavigators:

const Stack = createStackNavigator();

const StackNavigator = (props) => {
    return(
        <Stack.Navigator screenOptions={{headerShown: false}}>
            <Stack.Screen name='MainMapScreen' component={MainMap} />
            <Stack.Screen name='TripDescription' component={TripDescription} />
            <Stack.Screen name='TripsListDetailScreen' component={TripsListDetailScreen} />
            <Stack.Screen
                name='TripsListScreen' 
                component={TripsListScreen} 
                options={{
                    headerLeft: () => (<Icon style={{marginHorizontal: 30, marginTop: 30}} color='white' name='menu' size={30} onPress={() => props.navigation.dispatch(DrawerActions.openDrawer())}/>),
                    title:'Something'
                    }}
            />
        </Stack.Navigator>
    );
};
export default StackNavigator;

Main Navigators:

const Navigator = () => {

    return(
        <NavigationContainer>
            <Drawer.Navigator
                statusBarAnimation='slide'
                drawerContent={props => 
                    <DrawerContent {...props} />}>
                <Drawer.Screen name='Welcome' component={WelcomeStackScreen}  />
                <Drawer.Screen name='TripsListScreen' component={TripsListScreen} />
                <Drawer.Screen name='PlanningProcess' component={StackNavigators} />
            </Drawer.Navigator>

        </NavigationContainer>
    );
};


export default Navigator;

Это то, что MainMap отображает:

Это то, что я ожидал при переходе от TripsListScreen (для создания новой поездки):

ПОЖАЛУЙСТА, ПОМОГИТЕ !!!

Answer 1

ComponentDidMount в MainMap. js не запускается, потому что экран уже смонтирован. Пожалуйста, посмотрите на эту `componentDidMount ()` функция не вызывается после навигации

Answer 2

Метод ComponentDidMount() запускается только впервые при монтировании компонента и при переходе на новый экран, предыдущий экран все еще монтируется в стеке.

Если вы хотите повторная инициализация вашего состояния каждый раз, когда ваш компонент получает фокус, вы можете установить слушателя на фокус на навигации.

Как это,

const unsubscribe = navigation.addListener('willFocus', () => {
      // Do something 
      // re-initialise the state
});

Answer 3

в StackNavigator, экраны не отключаются при открытии новых экранов поверх них. Таким образом, если вы go от A до B, то от B до C, и A, и B останутся подключенными. Если вы вернетесь go из C в B, C размонтируется. Это как push и pop методы в массиве. componentDidMount в MainMap не вызывается, когда вы go возвращаетесь к нему, так как он не отключается в первую очередь. Это объясняется здесь Жизненный цикл навигации .

Поскольку вы используете Redux и говорите, что все данные хранятся в хранилище Redux, заставьте компонент MainMap визуализировать исключительно из данных из хранилища, а не из собственного состояния. Затем вы можете манипулировать этими данными из TripsListScreen путем отправки действий. Самым простым было бы создать что-то вроде RESET_MAIN_MAP действие, которое сбросит эту часть состояния для экрана MainMap