这段代码是我面临的问题的一个例子。

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>
  );
}

当屏幕从第页1移动到第页2时，我希望它按以下顺序运行

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

第二步和第三步正在颠倒。页面1上的useEffet返回逻辑正在页面2上运行并影响它。
有什么好办法解决这个问题吗？