如何防止在返回上一个屏幕时执行useEffect react-本机堆栈导航器

7rtdyuoh  于 2023-10-22  发布在  React
关注(0)|答案(2)|浏览(117)

在我的用例中有两个屏幕(stacknavigator),从第一个屏幕它需要从firebase获取数据(使用getList()方法),并需要在平面列表中显示它们。然后详细的屏幕显示所有的数据。当单击一个flatlist项时,getList()方法只执行一次,而不是每次都执行。因此,我使用下面的useIsFocused方法来解决这个问题。

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

  const isFocused = useIsFocused();

  useEffect(() => {
    if (isFocused == true) {
      getList();
     }

  }, [isFocused]);

但是,当从详细屏幕导航回第一个屏幕时,需要持久化从getList()方法获得的数据,而无需再次执行/刷新它。如果我不使用useIsFocused(),它工作正常,因为默认情况下不刷新它时,回到上一个屏幕,但在这种情况下,我的第一个要求不能满足。对此有什么解决方案吗?感谢你的意见。

uz75evzq

uz75evzq1#

当进入详细屏幕时,您可以将第一个屏幕中的数据沿着。因此,当您从详细屏幕返回到第一个屏幕时,您仍然拥有数据,无需执行任何特殊操作。您可以使用navigate函数并将数据放入params对象中,如下所示:

navigation.navigate('DetailedScreen', { data: data });

在详细屏幕中,您可以使用route.params.data访问数据。

laik7k3q

laik7k3q2#

我通过以下方式解决了这个问题。

const [dataFetched, setDataFetched] = useState(false);

  useEffect(() => {
    if (!dataFetched) {
    if (isFocused == true) {
      getStoryList();
      setDataFetched(true);
     }}

  }, [isFocused]);

相关问题