Как запустить useEffect при передаче реквизита обратно родительскому компоненту

Этот вопрос касается React Navigation 5 в приложении React Native. При передаче реквизита обратно на родительский экран, как настроить триггер на родительском экране для useEffect? Вот пример:

Child Screen

_onPress = (country, country_code, calling_code) => {
    const { navigation, route } = this.props;
    navigation.navigate("parent"
    {select:{
        country_name: country,
        country_code: country_code,
        calling_code: calling_code
    });
};

на родительском компоненте. useEffect используется для каких-либо действий после того, как свойства select передаются обратно с дочернего экрана:

useEffect(()=> {
   if (route.params?.select?) {
      //do something after select is passed back
   }
}, [what is the trigger?])  //<<==how to setup trigger for useEffect?. [] did not work.

Как настроить триггер в родительском компоненте для использования эффекта? Пытался использовать [], который срабатывает при любой перезагрузке, но это не сработало. Должны ли те же свойства select передаваться от родительского компонента на дочерний экран и снова передаваться обратно родительскому компоненту после обновления на дочернем экране? select триггер?


react-navigation react-navigation-v5
person user938363    schedule 08.03.2021    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Что ж, поскольку вы используете React Navigation 5, вы можете заменить useEffect на useFocusEffect, и ваши функции будут вызываться каждый раз, когда пользователь приходит / возвращается на родительский экран.

Сначала импортируйте useFocusEffect в начало файла следующим образом:

import { useFocusEffect } from "@react-navigation/native"

затем замените useEffect на useFocusEffect следующим образом:

 useFocusEffect(
    React.useCallback(() => {
      if (route.params?.select?) {
      //do something after select is passed back
   }
      return () => {
        // Here you can do something when the screen is unfocused such as clearing event listners but you can also leave it empty if you want
       
      };
    }, [])
  );

person Proff Mushiana Mulweli    schedule 08.03.2021

arrow_upward
1
arrow_downward

Еще одна вещь, которую вы можете сделать, - это установить параметры состояния навигации, когда вы переходите к дочернему экрану с родительского экрана, как это.

 props.navigation.navigate('ChildScreen', {onNewCreate});

В дочернем компоненте это только что называется

select:{
    country_name: country,
    country_code: country_code,
    calling_code: calling_code
}


 props.navigation.state.params.onNewCreate(select);

А в родительском компоненте просто определите onNewCreate (), и вы можете делать то, что хотите.

 const onNewCreate = async (select) => {
//You can do what you want here with select}
person Awais Ibrar    schedule 08.03.2021
comment
Это используемый шаблон, который вызывает предупреждение в React Navigation 5.x. - person user938363; 09.03.2021