将 props 传回父组件时如何触发 useEffect

Question

此问题适用于 React Native 应用程序中的 React Navigation 5。将道具传回父屏幕时，如何在 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 用于在子屏幕传回 props 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.

如何在父组件中为useEffect设置触发器？尝试使用 [] 将触发任何重新加载，但它没有用。相同的 props select 从父组件传递到子屏幕，在子屏幕更新后再次传回父组件吗？ select 是触发器吗？

Answer 1

好吧，既然你使用的是 React Navigation 5，你可以做的就是用 useFocusEffect 替换 useEffect，并且每次当用户 arrives/returns 到父屏幕时都会调用你的函数.

首先像这样在文件顶部导入 useFocusEffect：

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

然后像这样用 useFocusEffect 替换 useEffect：

 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
       
      };
    }, [])
  );

Answer 2

您还可以做的一件事是像这样从父屏幕移动到子屏幕时设置导航状态参数。

 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}

将 props 传回父组件时如何触发 useEffect

How to trigger useEffect when passing props back to parent component

react-navigation

react-navigation-v5