Установка параметров в useEffect и получение параметров в createStackNav в React Navigation 5

Question

Я работаю над приложением, в котором мне нужно отправить или установить определенные параметры моего состояния в объекте.

Вот мой объект с его уважаемым состоянием:

   const [isGlutenFree, setIsGlutenFree] = useState(false);
    const [isLactoseFree, setisLactoseFree] = useState(false);
    const [isVegan, setIsVegan] = useState(false);
    const [isVegetarian, setIsVegetarian] = useState(false);
    
    const saveFilters = () => {
       const appliedFilters = {
          glutenFree: isGlutenFree,
          lactosFree: isLactoseFree,
          vegan: isVegan,
          isVegetarian: isVegetarian
       };
    };

Все они находятся в моем FiltersScreen.js файле. Итак, на моем useEffect я попытался использовать CommonActions для установки параметров:

import { CommonActions } from '@react-navigation/native';

useEffect(() => {
    props.navigation.dispatch(CommonActions.setParams({ save: saveFilters }));
});

Затем внутри моего Navigator.js файла я попытался получить это и console.log this на экране, чтобы увидеть, что в нем есть нужные мне данные:

<FilterNav.Screen
                name="Filters"
                component={FiltersScreen}
                options={({ route }) => ({
                    title: 'Filters',
                    headerLeft: () => (
                        <HeaderButtons HeaderButtonComponent={HeaderButton}>
                            <Item
                                title='Menu'
                                iconName='ios-menu'
                                onPress={() => {
                                    navigation.toggleDrawer();
                                }}
                            />
                        </HeaderButtons>
                    ),
                    headerRight: () => (
                        <HeaderButtons HeaderButtonComponent={HeaderButton}>
                            <Item
                                title='Save'
                                iconName='ios-save'
                                onPress={() => {
                                    // CONSOLE LOG THE PARAMS SET >>
                                    console.log(route.params.save);
                                }}
                            />
                        </HeaderButtons>
                    )
                })}

            />
        </FilterNav.Navigator>

Чтобы указать c в этой части:

 headerRight: () => (
                            <HeaderButtons HeaderButtonComponent={HeaderButton}>
                                <Item
                                    title='Save'
                                    iconName='ios-save'
                                    onPress={() => {
                                        // CONSOLE LOG THE PARAMS SET >>
                                        console.log(route.params.save);
                                    }}
                                />
                            </HeaderButtons>
                        )

Но это не работает и не работает ' не вернуть ничего. Также он замораживает все мои коммутаторы.

Вот полный код для FiltersScreen.js:

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, Switch, Platform } from 'react-native';

import { CommonActions } from '@react-navigation/native';

import Colors from '../constants/colors';

const FiltersSwitch = props => {
    return(
    <View style={styles.filterContainer}>
        <Text>{ props.label }</Text>
        <Switch
            trackColor={{ true: Colors.primaryColor }}
            thumbColor={Platform.OS === 'android' ? Colors.primaryColor : ''}
            value={props.state}
            onValueChange={props.onChange} />
    </View>
    );
};

const FiltersScreen = props => {

    const [isGlutenFree, setIsGlutenFree] = useState(false);
    const [isLactoseFree, setisLactoseFree] = useState(false);
    const [isVegan, setIsVegan] = useState(false);
    const [isVegetarian, setIsVegetarian] = useState(false);
    
    // We will give this a connection with the 
    // MealsNavigator in order to trigger this 
    // function via useEffect 
    const saveFilters = () => {
       const appliedFilters = {
          glutenFree: isGlutenFree,
          lactosFree: isLactoseFree,
          vegan: isVegan,
          isVegetarian: isVegetarian
       };
    };

    useEffect(() => {
        props.navigation.dispatch(CommonActions.setParams({ save: saveFilters }));
    });

    return (
        <View style={styles.screen}>
            <Text style={styles.title}>Available Filters / Restrictions</Text>
            <FiltersSwitch
                label="Glutten Free"
                state={isGlutenFree}
                onChange={newValue => setIsGlutenFree(newValue)} />

            <FiltersSwitch
                label="Lactose Free"
                state={isLactoseFree}
                onChange={newValue => setisLactoseFree(newValue)} />

            <FiltersSwitch
                label="Vegan"
                state={isVegan}
                onChange={newValue => setIsVegan(newValue)} />

            <FiltersSwitch
                label="Vegetarian"
                state={isVegetarian}
                onChange={newValue => setIsVegetarian(newValue)} />
        </View>
    );
}

const styles = StyleSheet.create({
    screen: {
        flex: 1,
        alignItems: 'center'
    },
    title: {
        fontFamily: 'poppins-bold',
        fontSize: 22,
        margin: 20,
        textAlign: 'center'
    },
    filterContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        width: '80%',
        marginVertical: 15
    }
});

export default FiltersScreen;

И вот полный код для navigation.js файла:

const FilterNav = createStackNavigator();

const FiltersNavigator = () => {
    return (
        <FilterNav.Navigator
            mode="modal"
            screenOptions={{
                headerStyle: {
                    backgroundColor: Colors.primaryColor,
                },
                headerTintColor: '#fff',
                headerTitleStyle: {
                    fontSize: 17
                }
            }}
        >
            <FilterNav.Screen
                name="Filters"
                component={FiltersScreen}
                options={({ route }) => ({
                    title: 'Filters',
                    headerLeft: () => (
                        <HeaderButtons HeaderButtonComponent={HeaderButton}>
                            <Item
                                title='Menu'
                                iconName='ios-menu'
                                onPress={() => {
                                    navigation.toggleDrawer();
                                }}
                            />
                        </HeaderButtons>
                    ),
                    headerRight: () => (
                        <HeaderButtons HeaderButtonComponent={HeaderButton}>
                            <Item
                                title='Save'
                                iconName='ios-save'
                                onPress={() => {
                                    console.log(route.params.save);
                                }}
                            />
                        </HeaderButtons>
                    )
                })}

            />
        </FilterNav.Navigator>
    );
};

Помогите пожалуйста как решить вот застрял пару раз. Я использую React Navigation 5.

Answer 1

Я предполагаю, что проблема "зависания" в том, что ваш useEffect выполняется на каждом рендере экрана, поскольку он не имеет массива зависимостей (прочтите Совет: Оптимизация производительности путем пропуска эффектов ). 1005 * Ваш код должен выглядеть примерно так:

// useCallback, so it doesn't create a new saveFilters function in every render
const saveFilters = useCallback(() => {
  const appliedFilters = {
    glutenFree: isGlutenFree,
    lactosFree: isLactoseFree,
    vegan: isVegan,
    isVegetarian: isVegetarian
  };
}, [isGlutenFree, isLactoseFree, isVegan, isVegetarian]); // This function depends on those variables.

useEffect(() => {
  props.navigation.dispatch(CommonActions.setParams({ save: saveFilters }));
}, [saveFilters]); // It should change the parameterized function if it changes