(React Native) UseEffect Return 在导航到另一个页面完成后执行

Question

此代码是我面临的问题的示例。

import {useEffect} from 'react';
import {Pressable, Text} from 'react-native';

function page1() {
  useEffect(() => {
    console.log(1); 1️⃣  

    return () => {
      console.log(2); 2️⃣
    };
  }, []);

  return (
    <Pressable onPress={() => navigation.navigate('page1')}>
      <Text>BUTTON</Text>
    </Pressable>
  );
}

function page2() {
  useEffect(() => {
    console.log(3); 3️⃣   

    return () => {
      console.log(4); 4️⃣
    };
  }, []);

  return (
    <Pressable onPress={() => navigation.goBack()}>
      <Text>BUTTON</Text>
    </Pressable>
  );
}

当屏幕从page1移动到page2时，我预计它会按以下顺序运行

1️⃣ console.log(1); // when on page1
2️⃣ console.log(2); // When leaving page1
3️⃣ console.log(3); // when on page2
4️⃣ console.log(4); // when leaving page2

然而实际结果如下

1️⃣ console.log(1); // when on page1
❓ Nothing happens // When leaving page1
3️⃣ console.log(3); // when on page2 ❓
2️⃣ console.log(2); // When on page2 ❓
4️⃣ console.log(4); // when exiting page2

步骤 2 和 3 颠倒过来。 page1 上的 useEffet 返回逻辑正在 page2 上运行并影响它。

有什么好的办法可以解决这个问题吗？

Answer 1

这就是实际发生的情况：

1、3、4

添加
• setup

   时会调用 

  page1

  函数 (1)
• 导航至第2页
添加
• setup

   时会调用 

  page2

  函数 (3)
• 返回

• cleanup

  函数 (4) 在

  page2

  被移除时被调用

page1

永远不会被删除，因此

cleanup

函数 (2) 不会被调用

查看useEffect的详细信息。

---

使用 useFocusEffect 检测页面何时进入和离开焦点。

1,3,2,4,1

当
• setup

   进入焦点

  时，调用 page1
函数 (1)
• 导航至第2页
当
• setup

   进入焦点

  时，调用 page2
函数 (3) 当
• cleanup

   失去焦点时，会调用 

  page1

  函数 (2)
• 返回
当
• cleanup

   失去焦点时，会调用 

  page2

  函数 (4)
当
• setup

   进入焦点

  时，调用 page1
函数 (1)